Редактировать 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/
person
Mathew Berg
schedule
02.01.2013
