带有键值列表的角度 ng 重复

Angular Ng-Repeat with Key Value list

本文关键字：ng 重复 键值 列表      更新时间：2023-09-26

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

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

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

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

您可以编写自己的过滤器，称为类似于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;
  };
});

感谢您的解决方案@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。

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

就我而言，我只是添加跟踪，它有效

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