AngularJS 循环和格式化答案

【问题标题】：AngularJS Loops and FormattingAngularJS 循环和格式化
【发布时间】：2014-05-21 09:54:17
【问题描述】：

对 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 变量，但也不知道该怎么做。

提前致谢

【问题讨论】：

ng-repeat="image in images" 怎么样，就像你在下面的 ng-repeat 中所做的那样？
但是为图像中的每个项目输出一行。我想要每 1 行 3 个项目。

标签： javascript angularjs model-view-controller

【解决方案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>

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

【讨论】：

虽然差不多了，但我需要带有 class="row" 的 div 来包装所有“列”div
在填写我自己的答案后找到了你的答案。谢谢你。所以 ng-if 只适用于它自己，而不是它的孩子？也很高兴它没有，但如果在 $index、$index + 1 或 $index + 2 处未找到任何元素，则不会引发 javascript 错误？
ng-if 也适用于孩子，但在这种情况下仅用于确定是否必须添加row。没有 javascript 错误被抛出，因为 Angular 视图是宽容的。我没有在小提琴中考虑到这一点，但是您可以在要创建的子项中添加 ng-if index+offset < items.length。
我再次更新了fiddle 来解决这个问题。我会相应地更新答案。

【解决方案2】：

<div class="row" ng-repeat="photo in photos" ng-if="$index % 3 == 0" ng-init="photoIndex = $index">
    <div ng-repeat="i in [0,1,2]" ng-if="(photoIndex + i)<photos.length" class="col-33">
        <img ng-src="{{photos[photoIndex+i]}}">
    </div>
</div>

这是上述答案的更简洁的版本。

【讨论】：