Добавить строки бутстрапа во время ng-repeat

У меня есть ситуация, когда у меня есть список данных, которые будут отображаться на отдельных панелях, используя сетку Bootstrap, я бы хотел воспользоваться широким экраном и отображать несколько панелей по горизонтали, но на узких экранах их стек, В настоящее время я разбираю на стороне сервера ejs следующим образом: столбцы передаются как параметр запроса, обычно устанавливаются на 2 или 3, поэтому каждый colClass является либо col-sm-6, либо col-sm-4.

<% var colWidth = 12/columns; var colClass = "col-sm-" + colWidth; %>
<% for(var i=0; i<contestData.classData.length; i++) {%>
    <% if ((classCount % columns) == 0) { %>
        <div class="row">
    <% } %>
    <div class="<%= colClass %>">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"> <%= contestData.classData[i].name %> </h3>
            </div>
            <div>...</div>
        </div>
    </div>
    <% classCount++ %>
    <% if ((classCount % columns) == 0) { %>
        </div>
    <% } %>
<% } %>

Это работает, но выполнение этого уровня макета на стороне сервера оскорбляет меня, я бы предпочел сделать это с помощью Angular, но я не могу понять, как обернуть соответствующее количество панелей в div с классом = строка при выполнении ng-repeat или даже ng-repeat-start = "classData in contestData.classData"

Спасибо!

Ответ 1

Здесь простое решение с просто HTML, 3 ROWS

<div class="row" >
    <div class="col-md-4" ng-repeat-start="item in data">
        I'M A ROW
    </div>
    <div class="clearfix" ng-if="($index+1)%3==0"></div>
    <div ng-repeat-end=""></div>
</div>

Ответ 2

Если вы начнете с фрагментации ваших данных на более мелкие части, в зависимости от количества столбцов, для создания макета будет легко использовать вложенный ng-repeat:

$scope.getRows = function(array, columns) {
  var rows = [];

  //https://stackoverflow.com/questions/8495687/split-array-into-chunks
  var i,j,temparray, chunk = columns;
  for (i=0,j=array.length; i<j; i+=chunk) {
      temparray = array.slice(i, i+chunk);

      rows.push(temparray);
  }

  return rows;
};

$scope.rows = $scope.getRows($scope.contestData, $scope.columns);

Тогда ваша разметка просто:

<div ng-repeat="row in rows">
  <div class="row">
    <div ng-class="{'col-xs-4': columns == 3, 'col-xs-3': columns == 4}" ng-repeat="contest in row">
      <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">{{contest}}</div>
          </div>
      </div>
    </div>
  </div>
</div>

Обратите внимание, что ng-class выполняет работу по определению типа добавляемого класса на основе количества столбцов. Этот пример передает 3 и 4, но вы можете расширить его, чтобы обрабатывать другие.

Ниже приведена рабочая демонстрация: http://plnkr.co/edit/B3VAXlq9dkzO3hQkbkN3?p=preview

Update:
Полноэкранный режим Plunker, похоже, мешает стилю ширины столбца, поэтому я изменил ссылку на отображение в режиме предварительного просмотра.

Ответ 3

Отвечая на мой собственный вопрос, похожий на ответ от j.wittwer, я создал фильтр, чтобы упорядочить мои данные по строке и т.д.:

angular.module('myApp.filters').
    filter('rowfilter', function () {
        return function (data, columnCount) {
            var rows = [];
        var colCount = columnCount || 2;
        var columns = [];
        for (var i = 0; i< data.length; i++) {
        columns.push(data[i]);
        if (columns.length == colCount) {
        rows.push(columns);
        columns = [];
        }
        }
        if (columns.length > 0) {
        rows.push(columns);
        }
        return rows;
        };
    });

И затем я использую фильтр (показанный здесь нефрит): .row(ng-repeat = "строка в конкурсеData.classData | rowfilter" ) .col-sm-6 (ng-repeat = "column in row" )

Работает очень хорошо, все еще обертывая мою голову вокруг Angular!

Ответ 4

У меня есть это решение, похоже, работает на 3 col

<div ng-repeat="r in data">
    <div class="row" ng-if="$index%3==0">
        <div class="col-md-4" ng-if="$index<data.length">
        {{data[$index]}}
        rrr
        </div>
        <div class="col-md-4" ng-if="$index+1<data.length">
        {{data[$index+1]}}
        rrr
        </div>
        <div class="col-md-4" ng-if="$index+2<data.length">
        {{data[$index+2]}}
        rrr
        </div>
    </div>
</div>

и данные

$scope.data = ['1','2','3','4','5','6','7'];

Ответ 5

Вы можете добавить что-то вроде этого, сначала в своем контроллере, выполняет ли функция папа целочисленная "точка останова", которая представляет собой количество столбцов, которые вы хотите обернуть строкой, и данные, которые вы хотите внутри каждого столбца, например:

  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;
    }

тогда всякий раз, когда вы извлекаете данные, просто выполните:

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

то в вашем html:

    <div class="row"  ng-repeat="row in rows">
     <div class="col-lg-4" ng-repeat="data in row">
       {{data.whatever}}
     </div>
</div>
     </div>

и это все, он должен работать для u.