ng-repeat 中的 angular.js 条件标记 [英] angular.js conditional markup in ng-repeat
问题描述
我正在使用 angular.js 和(为了论证)引导程序.现在我需要迭代事物"并将它们显示在行"中:
<div class="span4">...</div><div class="span4">...</div><div class="span4">...</div><div class="row">等等...
现在，我怎样才能用角度关闭我的 .row div?我从 angular-ui 尝试了 ui-if 但即使这样也没有成功.
如果我要使用服务器端渲染，我会做这样的事情(这里是 JSP 语法，但无所谓):
<div class="span4">..<%-- 诀窍是:--%><c:if test="${i.index % 3 == 2}"></div><div class="row"></c:if></c:forEach>
请注意，我需要在这里实际更改 DOM，而不仅仅是 css-hiding 元素.我尝试在 .row 和 .span4 div 上重复，但无济于事.
Edit Nov 12, 2013
似乎在 1.2 中不仅 angular 改变了一点，而且还有更好的方法.我创建了两个过滤器.我试图将它们合二为一，但出现了摘要错误.这是两个过滤器:
.filter("mySecondFilter", function(){返回函数(输入，行，numColumns){var returnArray = [];for(var x = row * numColumns; x |
现在 html 将如下所示:
<tr data-ng-repeat="rows in (objects | myFilter:numColumns)"><td data-ng-repeat="column in (objects | mySecondFilter:rows:numColumns)">{{ column.entry }}</td></tr>
jsFiddle:http://jsfiddle.net/W39Q2/><小时>
编辑 2013 年 9 月 20 日
在处理需要动态列的大量数据时，我想出了一个更好的方法.
HTML:
<tr data-ng-repeat="object in (objects | myFilter:numColumns.length)"><td data-ng-repeat="numColumns 中的列">{{objects[$parent.$index * numColumns.length + $index].entry }}</td></tr>
Javascript:
$scope.objects = [ ];for(var x = 65; x <91; x++){$scope.objects.push({条目:String.fromCharCode(x)});}$scope.numColumns = [];$scope.numColumns.length = 3;新过滤器:
.filter("myFilter", function(){返回函数(输入，列){var 过滤 = [];for(var x = 0; x 这允许它是动态的.要更改列，只需更改 numColumns.length.在 js fiddle 中，您可以看到我已将其连接到下拉列表.
jsFiddle:http://jsfiddle.net/j4MPK/><小时>
您的 html 标记如下所示:
<div data-ng-repeat="col in row.col">{{col}}</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="col" data-ng-repeat="col in cols">{{objects[$parent.$index * numColumns + $index].entry}}然后在控制器中我有:
$scope.objects = [{条目:'a'}，{条目:'b'}，{条目:'c'}，{条目:'d'}，{条目:'e'}，{条目:'f'}，{条目:'g'}，{条目:'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/
I'm using angular.js and (for the sake of argument) bootstrap. Now I need to iterate on "things" and display them in ''rows'' :
<div class="row">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<div class="row">
etc...
Now, how can I close my .row div on every third thing with angular? I tried ui-if from angular-ui but even that doesn't make it.
If I were to use server-side rendering, I would do something like this (JSP syntax here, but does not matter) :
<div class="row>
<c:forEach items="${things}" var="thing" varStatus="i">
<div class="span4">
..
</div>
<%-- Here is the trick:--%>
<c:if test="${i.index % 3 == 2}">
</div><div class="row">
</c:if>
</c:forEach>
</div>
Note that I need to actually alter the DOM here, not just css-hiding elements. I tried with the repeat on the .row and .span4 divs, with no avail.
Edit Nov 12, 2013
It seems that not only did angular change a little in 1.2, but that there is an even better method. I've created two filters. I tried to combine them into one but got digest errors. Here are the two filters:
.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;
}
});
And now the html will look like this:
<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/
Edit Sept 20, 2013
While working with lots of data that needed dynamic columns I've come up with a better method.
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;
New Filter:
.filter("myFilter", function(){
return function(input, columns){
var filtered = [];
for(var x = 0; x < input.length; x+= columns){
filtered.push(input[x]);
}
return filtered;
}
});
This allows it to be dynamic. To change the columns just change the numColumns.length. In the js fiddle you can see I've wired it up to a dropdown.
jsFiddle: http://jsfiddle.net/j4MPK/
Your html markup would look like this:
<div data-ng-repeat="row in rows">
<div data-ng-repeat="col in row.col">{{col}}</div>
</div>
And then you could make a variable in your controller like so:
$scope.rows = [
{col: [ 1,2,3,4 ]},
{col: [ 5,6,7 ]},
{col: [ 9,10,11,12 ]}
];
This way, you can have any number of columns you want.
jsfiddle http://jsfiddle.net/rtCP3/39/
Edit I've modified the fiddle to now support having a flat array of objects:
jsfiddle: http://jsfiddle.net/rtCP3/41/
The html now looks like this:
<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>
And then in the controller i have:
$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;
The $scope.numColumns variable is used to specify how many columns you want in each row.
To handle dynamic array size changes, put a watch on the length of the array (not the whole array, that would be redundent)
$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/
这篇关于ng-repeat 中的 angular.js 条件标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
