在页面上，使用ng-repeat，我尝试在网格布局上放置按钮。 迭代在控制器$ scope.btnNames []中定义的数组。按钮位于等于数组大小$ scope.btnNames []
的按钮总数上我想说每行4个按钮。 由于$ scope.btnNames []的大小是20，所以我喜欢在5行上放置20个按钮， 每行有4个按钮。
控制器上的1）： - 我有一个带按钮名称的数组 $ scope.btnNames ['aa'，'bb'，'cc'，'dd'，'ee'，'ff'....]，其大小为20.
2）在页面上： - 使用ng-repeat，迭代执行 $ scope.btnNames []并按照以下代码放置按钮
<body ng-controller="PopupCtrl">
<div class="row responsive-sm">
<div ng-repeat="btnName in btnNames">
<button id={{$index}} class="button button-dark col" >{{btnName}}</button>
</div>
</div>
请帮我定义class =“row”和class =“col”这样的方式， 在ng-repate期间，在第4个按钮之后，它应该添加一个新行并放置4个按钮，直到它到达ng-repeat结束。
对于离子和angulrJs都不熟悉，我在ng-repeat期间无法定义class =“row”（类似于for循环，其中，放置一个新的class =“row”，当迭代器计数器在此时case {{index}}大于4.
答案 0 :(得分：23)
flex-wrapYou can get this behavior by using style="flex-wrap: wrap;" + the following CSS classes:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-25" ng-repeat="btnName in btnNames">
<button class="button button-dark" >{{btnName}}</button>
</div>
</div>
答案 1 :(得分：9)
您可以在此处找到可能的解决方案：https://stackoverflow.com/a/23780288/1015046
我已采用上述解决方案并将其实施为Ionic：http://codepen.io/arvindr21/pen/EaVLRN
<div ng-repeat="btnName in btnNames">
<div ng-if="$index%4==0" class="row">
<div class="col">
<button id={{$index}} class="button button-dark">{{btnNames[$index]}}</button>
<button id={{$index+1}} class="button button-dark">{{btnNames[$index+1]}}</button>
<button id={{$index+2}} class="button button-dark">{{btnNames[$index+2]}}</button>
<button id={{$index+3}} class="button button-dark">{{btnNames[$index+3]}}</button>
</div>
</div>
</div>
如果您希望网格是动态的，可以查看：https://stackoverflow.com/a/27080632/1015046
感谢。
答案 2 :(得分：3)
好的，所以如果你想在行中堆叠像我这样的图像，请参阅ng-repeat如何保持col-50。
<div class="row gallery">
<div class="col col-50" ng-repeat="photo in photos">
<img id="fitWidth" ng-src="{{photo.url}}"/>
</div>
</div>
然后用你的CSS。
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
在IOS上测试过，希望有所帮助：）
答案 3 :(得分：2)
我想补充一下@Jossef Harush的回答（顺便说一句，顺便说一下，有效）。
但是，当我在 iPhone 上的Ionic View应用程序中进行测试时，它无效。当我在 Android 上的Ionic View应用程序中测试它时，它按预期工作（多行）。
解决方案是将其添加为样式：
style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"
因为，see here Safari可能需要-webkit前缀。
希望这可以帮助那些选择@ Arvind的解决方案的人。
答案 4 :(得分：1)
我在样式中添加flex-wrap: wrap后立即为我工作。
由于我已经设置了col-50，因此我开始按照预期获得包含两列的行。
示例：
<div class="row" style="flex-wrap: wrap;">
<div class="col col-50" ng-repeat="picture in pictures">
{{picture.src}}
</div>
</div>
答案 5 :(得分：0)
在AngularJS中有一个limitTo起始$index，
也许这可以简化事情
<div class="row" ng-repeat="element in elements" ng-if="$index % 4==0">
<div class="element" ng-repeat="element in elements|limitTo:4:$index">...</div>
</div>
这将确保{{ index + 1 }}落在不存在的单元格上。