add bootstrap rows during ng-repeat

Question

I have a situation where I have a list of data to be displayed in individual panels, Using Bootstrap\'s grid system, I\'d like to take advantage of a wide screen and displa

Answer 1

You can add something like this, first in your controller, do a function dad gets an integer "breakpoint" that is the number of columns you want to wrapped by a row, and the data you want inside each column like so:

  function getRows(breakpoint,data) {
        var len = data.length; var i = 0;
        var rows = []; var temp = [];
        for (; i < len; i++) {
            if (i % breakpoint == 0 && i != 0) {
                rows.push(temp);               
                temp = [];
            } 
            temp.push(data[i]);
        }
        var len2 = rows.length * breakpoint;
        if (len > len2) {
            //var leftOvers = len - len2;
            i = len2; temp = [];
            for (; i < len; i++) {
                temp.push(data[i]);
            }
            rows.push(temp);
        }

        return rows;
    }

then whenever you recive the data yo simply do:

 $scope.rows = getRows(3,data); // in case you want 3 cols.

then in your html:

    

     

       {{data.whatever}}