带有键值列表的 Angular Ng-Repeat

Question

我正在返回一个包含需要迭代的键/值的对象。 我这样做：

ng-repeat="(index, thing) in data"

非常简单，但是我需要将其限制为 2 个项目。 并且常规的 limitTo Angular 过滤器似乎不是这样工作的。 是否可以在视图中以这种方式过滤？ 还是我必须在数据到达视图之前修改数据？ 例如，我希望能够做到这一点：

ng-repeat="(index, thing) in data | limitTo:2"

Answer 1

您可以编写自己的过滤器，称为limitObjecTo类的limitObjecTo ，它能够返回仅具有前两个属性的对象。

有什么原因你不使用数组吗？ 这似乎更合适。

示例： http : //jsfiddle.net/LgTfs/

.filter('limitObjectTo', function() {
  return function(obj, limit) {
    var newObj = {}, i = 0, p;
    for (p in obj) {
      newObj[p] = obj[p];
      if (++i === limit) break;
    }
    return newObj;
  };
});

Answer 2

感谢@Langdon 的解决方案！ 我做了一些改进，以限制 FROM 和限制 TO：

.filter('limitObjectFromTo', function() {
      return function(obj, limitFrom, limitTo) {
         var newObj = {},
          i = 0;
          for (var p in obj) {
            if (i >= limitFrom) newObj[p] = obj[p];
            if (++i === limitTo) break;
          }
        return newObj;
      };
  });

也许有人会使用它:-) 然后你只需添加： | limitObjectFromTo: 2:6 | limitObjectFromTo: 2:6限制从 2 到 6。

Answer 3

我设法将$index与ng-if结合使用来过滤键，如下所示

   fruVeg = {
                'a' : 'apple',
                'b' : 'banana',
                'c' : 'carrot',
                'd' : 'fandelion',
                'e' : 'eggs',
                'f': 'fig'
            };

在我的模板上，我这样做是为了将其限制为 funcs 对象中的前 4 个键

<label ng-repeat='(key,val) in fruVeg' ng-if="$index<4"> [[key]]</label>

Answer 4

在我的情况下，我只是添加 track by 并且它起作用了

<tr ng-repeat="(key,preview) in clients.mobiles | limitTo:5 track by $index">
  <td>{{preview}}</td>
  <td>{{clients.text[key]['textClean']}}</td>
</tr>