可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

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.

回答2:

Use `flex-wrap`

You 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>

http://codepen.io/Jossef/pen/doeJJP

回答3:

Ok, So if you want to stack images like me in rows, See how the ng-repeat holds 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>

Then with your css.

.gallery {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

Tested on IOS, Hope that helps :)

回答4:

I would just like to add to the @Jossef Harush's answer (which, btw, worked).

However, when I tested it in the Ionic View application on iPhone, it didn't work. When I tested it in the Ionic View application on Android it worked as expected (multiple rows).

The solution was to add this as a style:

style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"

because, as you can see here Safari needs a -webkit prefix.

Hope this helps someone who will choose this solution over @Arvind's.

回答5:

Worked for me as soon as I added flex-wrap: wrap in the styling. Since i have set col-50 I started getting rows with two columns as intended.

Example:

<div class="row" style="flex-wrap: wrap;">
    <div class="col col-50" ng-repeat="picture in pictures">
        {{picture.src}}
    </div>
</div>

回答6:

There's a limitTo starting $index in AngularJS, Maybe that can simplify things

<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>

That will make sure that {{ index + 1 }} fall on a non-existent cell ..