为每个n个元素自定义ng-在AngularJS中重复
我正在尝试自定义一个ng-repeat，以便将类似于br标记的东西添加到第四个元素中。我试过四处寻找，但似乎找不到确切的答案。有什么简单的方法可以为这样的事情增加条件吗？我的ng-repeat只是添加了一些包含内容的spans，但是我需要每4个元素启动一个新的行。
也就是说，我想要以下内容
item1 item2 item3 item4 item5 item6 item7 item8
但现在它就是这么做的
item1 item2 item3 item4 item5 item6 item7 item8
如果有任何关于ng-repeat定制的好文章(对于新手)，我会感谢链接，以及到目前为止我发现的一切都是很难理解的。
<div class="section">
<div ng-repeat="items in MyList">
<img ng-click="AddPoint($index)" src={{items.image}} />
<span>{{items.currentPoint}}/{{items.endPoint}}</span>
</div>
</div>回答 4
Stack Overflow用户
发布于 2014-08-11 17:51:13
您只需使用$index并将其与ng-if一起应用于<br ng-if="!($index%4)" />
<div class="section">
<div ng-repeat="items in MyList">
<img ng-click="AddPoint($index)" src={{items.image}} />
<span>{{items.currentPoint}}/{{items.endPoint}}</span>
<br ng-if="!(($index + 1) % 4)" />
</div>
</div>更新
根据注释，您只需要css就可以清除每个nth元素的浮动。
.section > div:nth-of-type(4n+1){
clear:both;
}演示
如果您担心对旧浏览器的支持，那么只需在特定条件下添加一个类：
<div ng-repeat="items in offensiveMasteries" ng-class="{wrap:!($index % 4)}">以及.section > div.wrap的一个规则
演示
Stack Overflow用户
发布于 2015-06-19 19:05:19
我相信你已经解决了你的问题。但是在将来，为什么不用javascript而不是前端把你的列表分开。只需做一些预渲染处理就可以得到这样一个对象：
// convert this
var list = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6"];
// into this
var list = [
["item 1", "item 2", "item 3"],
["item 4", "item 5", "item 6"]
];
// you could use a function like this
function convertToRowsOf3(list) {
var newList = [];
var row;
for(var i = 0; i < list.length; i++){
if(i % 3 == 0){ // every 3rd one we're going to start a new row
if(row instanceof Array)
newList.push(row); // if the row exists add it to the newList
row = [] // initalize new row
}
row.push(list[i]); // add each item to the row
}
if(row.length > 0) {
newList.push(row);
}
return newList;
}<span ng-repeat="row in list">
<span ng-repeat="col in row" ng-bind="col"></span><br>
</span>
Stack Overflow用户
发布于 2017-01-23 16:29:41
PSL的解决方案是解决更整洁的问题，但是..。我也遇到了同样的问题，最终以如下的方式解决了这个问题(对于那些不想调整CSS或者不想这么做的人)
<div class="row responsive-sm" ng-repeat="exercise in exercises" ng-if="$even">
<div class="col col-50">
<div class="item item-stacked-label">
{{exercise.title}}
</div>
....
</div>
<div class="col col-50" ng-if="!$last" ng-init="exercise = exercises[$index+1]">
<div class="item item-stacked-label">
{{exercise.title}}
</div>
....
</div>
</div>
在这里，我不得不在每一行进行2次练习，并且只是使用ng-init来重新设置每个副本上实际挑选的一个(练习)到下一个($index+1)。请注意ng中的!$last -如果没有输出，可能会损坏页面，因为数组中没有更多要显示的元素。
https://stackoverflow.com/questions/25249388
复制相似问题
腾讯云开发者
