Javascript 如何使用angular 1.0.8在ng repeat中使用if语句

我的角度是1.0.8稳定的

我的目标是以3行显示数据

我的html应该是

<div class="table-row">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>

项目1
项目2
项目3

我的伪代码是如果$index mod 3==0，那么我将显示

如果$index mod 3==2，那么我将显示

到目前为止，我有这个

<div ng-repeat='item in my_works.items'>
    <!-- if index mod 3 == 0 show <div>-->
    <!-- if index mod 3 == 2 show </div>-->
</div>

也许我的想法是错误的，因为在angularjs中可能有更有效的方法来实现这一点？

您可以在表达式中使用

（key，value）

——其中key和value可以是任何用户定义的标识符，而expression是提供集合枚举的范围表达式

你可以试试这样的

<div ng-repeat='(index, item) in my_works.items'> 
   <div class="table-row" ng-show="index % 3 == 0">
   </div>
</div>

---

既然在1.0.8中不能使用

ng if

，这里有两种变体可以解决这个问题。它们都将3个项目包装到一个表行

div

外部循环以三个为一组进行计数，因此每个外部表行触发一次

div

。第二种方法使用过滤器来控制循环范围，但它应该具有更好的性能。第一种方法不需要新的过滤器

然后，内部的

ng repeat

循环遍历一行中的3项。它使用slice只获取该特定行所需的3个数组项

以下是两种变体都起作用的小提琴：

选项1:不带新过滤器的解决方案：

   <div ng-repeat='itemtmp in items|limitTo:(items.length/3)+1'>
        <div class="table-row"> 
            <span ng-repeat='item in items.slice($index*3,($index*3+3))'>
              {{item.name}} - {{$index}}
            </span>
          </div>
   </div>

{{item.name}-{{$index}

选项2:使用范围过滤器的更高性能解决方案

{{item.name}-{{$index}

以及相关的范围过滤器：

 app.filter('range', function () {
    return function (input, total) {
        total = parseInt(total);
        for (var i = 0; i < total; i++) {
            input.push(i);
        }
        return input;
    };
});

app.filter（'range'，function（）{
返回函数（输入，总计）{
总计=parseInt（总计）；
对于（变量i=0；i

两者都经过测试（降至1.0.2）并正常工作

将项目的平面列表转换为3个项目的列表

遍历列表列表

我认为这符合你正在努力做的事情；这里有一个小插曲：

---

但是我没有机会用旧的Angular进行测试。

首先，有

ngIf

，其次-您不是第一个尝试以3行显示元素的人。搜索相关问题：）@BenjaminGruenbaum谢谢。但是我使用的是稳定的1.0.8，所以我没有ngIf。到目前为止，我没有搜索到与我设置相同的问题。请注意，

ng show

将隐藏整个div（包括内容）。所以你不能用它来创建div的开头部分。拥有这样的控制级别会更好。但遗憾的是，我们没有——所以这个答案只是隐藏了每三个项目——我选择这个答案和选项2。这是一个很好的答案。我不明白为什么它得到了-1票。我对从angularjs发送jsonp请求有另一个问题。想帮忙吗？这导致了我的“10$digest（）迭代已达到。正在中止！”。

 app.filter('range', function () {
    return function (input, total) {
        total = parseInt(total);
        for (var i = 0; i < total; i++) {
            input.push(i);
        }
        return input;
    };
});

<div class="table-row" ng-repeat="list in listOfLists"> <div class="item" ng-repeat="item in list"> {{ item }} </div> </div>

app.filter('chunked', function(){
    return function(list, chunkSize){
        var chunks = [];
        angular.forEach(list, function(element, i){
            if(i % chunkSize === 0){
                 currentChunk = [];
                 chunks.push(currentChunk);
            }
            currentChunk.push(element);
        });
        return chunks;
    };
});