Ionic Framework：具有多个行和列的GridLayout，其中按钮放置在arrayItem上 [英] Ionic Framework: GridLayout with multiple rows and column on which buttons placed for an arrayItem
问题描述
在页面上，使用ng-repeat，我尝试在网格布局上放置按钮。
遍历在控制器$ scope.btnNames []中定义的数组。按钮位于按钮总数等于数组大小$ scope.btnNames []
On a page, using ng-repeat, I try to place buttons on a grid layout. Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on Total number of buttons equal to array size of $scope.btnNames[]
我想说每行4个按钮。
由于$ scope.btnNames []的大小是20，那么我喜欢在5行上放置20个按钮，
，其中每行有4个按钮。
I would like to put say 4 buttons per row. As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows, where each row will have 4 buttons.
1）：
- 我有一个按钮名为
$ scope.btnNames ['aa'，'bb'，'cc'，'dd'，'ee'，' ff'....]，其大小为20.
1) on Controller : - I have an array with button names $scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.
2）页面上：
- 使用ng-repeat，迭代完成
$ scope.btnNames []并按照以下代码放置按钮
2) on the page:
- using ng-repeat, iterate throught the
$scope.btnNames[] and put buttons as per follwoing code
<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结束。
Please help me defining class="row" and class="col" and such a way that, during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.
作为离子和angulrJs的新手，我无法在ng-repeat期间定义class =row（类似于for循环，其中，放一个新类= row，当迭代器计数器在这种情况下{{index}}大于4.
Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4.
推荐答案
你可以找到一个可能的解决方案这里： https://stackoverflow.com/a/23780288/1015046
You can find a possible solution here : https://stackoverflow.com/a/23780288/1015046
我采用了上述解决方案并将其用于Ionic： http://codepen.io/ arvindr21 / pen / EaVLRN
I have taken the above solution and implemented it for 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
If you want the grid to be dynamic, you can take a look at : https://stackoverflow.com/a/27080632/1015046
谢谢。
这篇关于Ionic Framework：具有多个行和列的GridLayout，其中按钮放置在arrayItem上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
