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

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

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

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

Angular Ng-Repeat with Key Value list

4 个答案: