javascript - Angular Ng-Repeat 与键值列表

Question

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

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

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

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

Answer 1

您可以编写自己的过滤器，称为类似的东西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限制从 2 到 6。

Answer 3

就我而言，我只是添加了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>

Answer 4

我设法$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>