javascript - AngularJS 循环和格式

Question

对 AngularJS 非常陌生，如果这是一个愚蠢的问题，请原谅我。

我需要以类似网格的格式输出数据(使用 Ionic)，并且我需要有一个用于行的 div 和用于列的单独的 div，如下所示

<div class="row">
    <div class="col-33">Item 1</div>
    <div class="col-33">Item 2</div>
    <div class="col-33">Item 3</div>
</div>
<div class="row">
    <div class="col-33">Item 4</div>
    <div class="col-33">Item 5</div>
    <div class="col-33">Item 6</div>
</div>

我的数据位于列表中，就像这样。

    $scope.images = [];
    $scope.images.push({text: 1});
    $scope.images.push({text: 2});
    $scope.images.push({text: 3});
    $scope.images.push({text: 4});
    $scope.images.push({text: 5});
    $scope.images.push({text: 6});

如何使用 $scope.images 列表将我的内容输出为网格？

我得到的最接近的在下面，但它不起作用。

<ion-content>
    <div class="list list-inset" ng-init="myIndex = 0">

        {{myIndex }} : {{ images.length }}

        <div ng-repeat="myIndex < images.length" >

            <div class="row" ng-repeat="colIndex in [0, 1, 2]" ng-init="colIndex = 0">

                <div ng-show="myIndex + colIndex < images.length" class="col-33" ng-init="myIndex = myIndex + 1">

                    {{ myIndex }}:{{ colIndex }}:{{myIndex + colIndex}}:{{ images[myIndex + colIndex].text}}

                </div>

            </div>

        </div>

    </div>

</ion-content>

是否存在 while 循环之类的东西？我希望如果我使用 ng-repeat="item in images"可以增加 $index 变量，但也不知道如何做到这一点。

提前致谢

Answer 1

有这样的事吗？ fiddle

<span style="float: left">{{item}}</span><br ng-if="($index+1)%3 == 0"/>

我只是每三个项目就换行一次，但我们可以扩展这种方法。

更新完整、有效的解决方案:fiddle

<div class="container">
    <div ng-repeat="item in items" ng-if="$index%3==0" class="row">
        <span ng-if="$index<items.length" style="float: left">{{items[$index]}}</span>
        <span ng-if="($index+1)<items.length" style="float: left">{{items[$index+1]}}</span>
        <span ng-if="($index+2)<items.length" style="float: left">{{items[$index+2]}}</span>
    </div>
</div>

该代码非常不言自明:该解决方案每三个元素创建一行，并且仅在元素实际存在时插入这些元素。