![按钮]( "按钮")
本文介绍了Ionic 框架:具有多行和多列的 GridLayout，在其上为 arrayItem 放置按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在页面上，使用 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[] 并按照以下代码放置按钮
<div class="row 响应-sm"><div ng-repeat="btnNames 中的 btnName"><button id={{$index}} class="button button-dark col" >{{btnName}}</button>
请帮我定义 class="row" 和 class="col" 以及这样的方式，在 ng-repate 期间，在第 4 个按钮之后，它应该添加一个新行并放置 4 个按钮，直到它到达 ng-repeat 的末尾.
作为 ionic 和 angulrJs 的新手，我无法在 ng-repeat 期间定义 class="row"(类似于 for 循环，其中，当迭代器计数器在此时，放置一个新的 class="row"case {{index}} 大于 4.
解决方案
您可以在这里找到可能的解决方案:https://stackoverflow.com/a/23780288/1015046
我已经采用了上述解决方案并为 Ionic 实施了它:http://codepen.io/arvindr21/pen/EaVLRN
<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>
如果你想要网格是动态的，你可以看看:https://stackoverflow.com/a/27080632/1015046
谢谢.
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[]
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) on Controller :- I have an array with button names $scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.
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>
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.
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.
解决方案
You can find a possible solution here : https://stackoverflow.com/a/23780288/1015046
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>
If you want the grid to be dynamic, you can take a look at : https://stackoverflow.com/a/27080632/1015046
Thanks.
这篇关于Ionic 框架:具有多行和多列的 GridLayout，在其上为 arrayItem 放置按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！