在页面上,使用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",在这种情况下迭代器计数器{{ index}}大于4.
Jos*_*ush 23
flex-wrap您可以使用style="flex-wrap: wrap;"以下CSS类来获取此行为:
<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>
您可以在此处找到可能的解决方案: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
谢谢.
| 归档时间： |
|
| 查看次数： |
24311 次 |
| 最近记录： |