2

我的角度是 1.0.8-stable

我的目标是以 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 中可能有更有效的方法来做到这一点？

4

3 回答 3

3

您可以使用(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>

参考

于 2013-10-24T11:42:03.160 回答
2

由于您不能ng-if在 1.0.8 中使用，这里有两个解决问题的变体。他们都将 3 个项目包装成一个表格行div

外部循环以三个为一组进行计数，因此每个外部 table-row 触发一次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）并且可以工作。

于 2013-10-24T15:59:23.497 回答
1
  1. 将您的平面项目列表转换为包含 3 个项目的列表。
  2. 遍历列表列表。
<div class="table-row" ng-repeat="listOfLists 中的列表">
    <div class="item" ng-repeat="item in list">
      {{ 物品 }}
    </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;
    };
});

我认为这与您正在尝试做的事情相匹配；这是一个plunker：http ://plnkr.co/edit/3h7JprbXFVwnNZErj7hl

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

于 2013-10-25T00:19:18.943 回答