Question

我的角度是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>

我的伪代码是$ index mod 3 == 0然后我会显示<div class="table-row">。

如果$ index mod 3 == 2，那么我将显示</div>。

到目前为止，我有这个。

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

也许我是以错误的方式思考它，因为在angularjs中可能有更有效的方法来做到这一点？

Answer 1

您可以使用(key, value) in expression - 其中key和value可以是任何用户定义的标识符，expression是范围表达式，用于枚举该集合。

您可以尝试这样的事情

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

Reference

Answer 2

由于您无法在1.0.8中使用ng-if，因此有两种解决方案可以解决问题。他们都将3个项目包装成表格行div

外部循环以三个为一组进行计数，因此每个外部表格行div会触发一次。第二种方法使用过滤器来控制循环范围，但它应该具有更好的性能。第一种方法不需要新的过滤器。

然后内部ng-repeat循环遍历行中的3个项目。它使用slice来获取该特定行所需的3个数组项。

以下是两种变体的小提琴：http://jsfiddle.net/f8D8q/4/

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

选项2 ：使用http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#more-about-loops中的范围过滤器提供更高效的解决方案

   <div ng-repeat="n in [] | range:(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>

以及相关的范围过滤器：

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

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

Answer 3

将您的单位项目列表转换为3个项目的列表列表。
迭代列表清单。

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

如果您已有items列表，则可以添加过滤器chunked并将listOfLists替换为items|chunked:3，假设您实施chunked之类的内容这样：

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;
    };
});

我认为这与你想要做的事情相符;这是一个掠夺者：http://plnkr.co/edit/3h7JprbXFVwnNZErj7hl

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

如何使用角度1.0.8在ng重复中使用if语句

3 个答案: