Angular.js условная разметка в ng-repeat

Ответ 1

Изменить 12 ноября 2013 г.

Похоже, что не только angular немного изменился в 1.2, но и существует еще лучший метод. Я создал два фильтра. Я попытался объединить их в один, но получил ошибки переваривания. Вот два фильтра:

.filter("mySecondFilter", function(){
    return function(input, row, numColumns){
        var returnArray = [];
        for(var x = row * numColumns; x < row * numColumns + numColumns; x++){
            if(x < input.length){
                returnArray.push(input[x]);                    
            }
            else{
                returnArray.push(""); //this is used for the empty cells
            }
        }
        return returnArray;   
    }
})
.filter("myFilter", function(){
    return function(input, numColumns){
        var filtered = [];
        for(var x = 0; x < input.length; x++){
            if(x % numColumns === 0){
                filtered.push(filtered.length);
            }
        }
        return filtered;
    }
});

И теперь html будет выглядеть так:

<table border="1">
     <tr data-ng-repeat="rows in (objects | myFilter:numColumns)">
          <td data-ng-repeat="column in (objects | mySecondFilter:rows:numColumns)">{{ column.entry }}</td>
     </tr>  
</table>

jsFiddle: http://jsfiddle.net/W39Q2/

Редактировать 20 сентября 2013 г.

При работе с большим количеством данных, требующих динамических столбцов, я придумал лучший метод.

HTML:

<table border="1">
    <tr data-ng-repeat="object in (objects | myFilter:numColumns.length)">
        <td data-ng-repeat="column in numColumns">{{ objects[$parent.$index * numColumns.length + $index].entry }}</td>
    </tr>  
</table>

JavaScript:

$scope.objects = [ ];
for(var x = 65; x < 91; x++){
    $scope.objects.push({
        entry: String.fromCharCode(x)
    });
}

$scope.numColumns = [];
$scope.numColumns.length = 3;

Новый фильтр:

.filter("myFilter", function(){
    return function(input, columns){
        var filtered = [];
        for(var x = 0; x < input.length; x+= columns){
             filtered.push(input[x]);   
        }
        return filtered;
    }
});

Это позволяет ему быть динамичным. Чтобы изменить столбцы, просто измените numColumns.length. В js скрипке вы можете видеть, что я подключил ее к выпадающему меню.

jsFiddle: http://jsfiddle.net/j4MPK/

Ваша html-разметка будет выглядеть так:

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

И тогда вы можете сделать переменную в своем контроллере следующим образом:

$scope.rows = [
    {col: [ 1,2,3,4 ]},
    {col: [ 5,6,7 ]},
    {col: [ 9,10,11,12 ]}
]; 

Таким образом, вы можете использовать любое количество столбцов.

jsfiddle http://jsfiddle.net/rtCP3/39/

Изменить. Я изменил скрипту, чтобы теперь поддерживать плоский массив объектов:

jsfiddle: http://jsfiddle.net/rtCP3/41/

Теперь html выглядит следующим образом:

<div class="row" data-ng-repeat="row in rows">
    <div class="col" data-ng-repeat="col in cols">
        {{objects[$parent.$index * numColumns + $index].entry}}
    </div>
</div>  

И затем в контроллере у меня есть:

$scope.objects = [
    {entry: 'a'},
    {entry: 'b'},
    {entry: 'c'},
    {entry: 'd'},
    {entry: 'e'},
    {entry: 'f'},
    {entry: 'g'},
    {entry: 'h'}    
];

$scope.numColumns = 3;
$scope.rows = [];
$scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns);
$scope.cols = [];
$scope.cols.length = $scope.numColumns;

Переменная $scope.numColumns используется, чтобы указать, сколько столбцов вы хотите в каждой строке.

Чтобы обрабатывать изменения размера динамического массива, поместите часы на длину массива (не весь массив, который будет избыточным)

$scope.numColumns = 3;  
$scope.rows = [];    
$scope.cols = [];    
$scope.$watch("objects.length", function(){
    $scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns);
    $scope.cols.length = $scope.numColumns;        
});

jsfiddle: http://jsfiddle.net/rtCP3/45/

Ответ 2

Почему бы не использовать что-то простое? http://jsfiddle.net/everdimension/ECCL7/3/

<div ng-controller="MyCtrl as ctr">
    <div class="row" ng-repeat="project in ctr.projects" ng-if="$index % 3 == 0">
         <h4 class="col-sm-4" ng-repeat="project in ctr.projects.slice($index, $index+3)">
            {{project}}
        </h4>
    </div>
</div>

Ответ 3

Я рекомендую директиву по нескольким причинам:

• он может быть повторно использован и параметризован в HTML (т.е. "каждая 3-я вещь" может быть атрибутом директивы)
• он не требует каких-либо свойств контроллера /$scope и, следовательно, не требует пересчета свойств $scope контроллера, если массив "вещей" изменяется в размере

Вот рекомендуемая директива элемента:

<row-generator row-data=objects col-count=3></row-generator>

В реализации я использовал код, похожий на ваш серверный пример:

myApp.directive('rowGenerator', function() {
    var rowTemplate = '<div class="row">',
        colTemplate = '<div class="span4">';
    return {
        restrict: 'E',
        // use '=' for colCount instead of '@' so that we don't
        // have to use attr.$observe() in the link function
        scope: { rowData: '=', colCount: '='},
        link: function(scope, element) {
            // To save CPU time, we'll just watch the overall
            // length of the rowData array for changes.  You
            // may need to watch more.
            scope.$watch('rowData.length', function(value) {
                var html = rowTemplate;
                for(var i=0; i < scope.rowData.length; i++) {
                    html += colTemplate + scope.rowData[i].key + '</div>';
                    if (i % scope.colCount == scope.colCount - 1) {
                        html += '</div>' + rowTemplate;
                    }
                }
                html += '</div>';
                // don't use replaceWith() as the $watch 
                // above will not work -- use html() instead
                element.html(html);
            })
        }
    }
});

Данные:

$scope.things = [
    {key: 'one'},
    {key: 'two'},
    {key: 3},
    {key: 4},
    {key: 'five'},
    {key: 'six'},
    {key: 77},
    {key: 8}    
];

Fiddle

Чтобы быть эффективной, директива, как показано, только ищет изменения в массиве rowData (т.е. вещи). Если вы хотите, чтобы директива обновляла представление, если значение одного из элементов массива изменяется, вам понадобится более дорогая $watch:

scope.$watch('rowData', function(value){ ... }, true)

true в конце делает "мелкую" грязную проверку ( "сравнивает объект для равенства, а не для ссылки) - см. docs.

В директиве мне не нравится одна вещь - ей нужно знать, что записи rowData имеют свойство с именем key:

html += colTemplate + scope.rowData[i].key + '</div>';