angularjs ng-repeat 在两个级别上但只有一个输出

2024-06-19

我有一个看起来像这样的大物体:

scope.marketplaces = {

    first_example : { ... },
    second_example : { ... },

    ...

};

我想做的是循环遍历大对象,如下所示:

<section>
    <ul>
        <li ng-repeat="(key, value) in marketplaces"></li>
    </ul>
</section>

在循环内部,再次循环每个对象,但不是附加到 DOM,例如:

<li> ... first level loop ...

    <li> ... second level loop ... </li>
</li>

我只想拥有一个<li></li>尽管我正在循环浏览该级别。我之所以想要这样是因为我需要key从要引用的第一个循环向下循环,仍然只有一个li.

我读过ng-repeat="friend in friends | filter:searchText"可以做我想做的事,但我不确定在过滤器表达式中我是否可以动态指定key或其他需要代替的东西searchText(我猜这是该对象已经知道的属性)。

所以我的问题是,我能实现我刚才解释的吗filter或者还有另一种方法吗?


我希望我已经理解了问题:您希望在嵌套对象上有一个 ngRepeat 。如此线性化对象。

第一种方法是创建过滤器:

app.filter('linear', function() {
  return function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    return result;
  };
});

并在html中:

<li ng-repeat="(key, value) in marketplaces | linear">
          {{key}}: {{value}}
</li>

但不幸的是当在过滤器中创建新元素时,AngularJS 会出现问题。您可能会在控制台中看到以下错误消息:

10 $digest iterations reached

无需黑客$$hash您暂时无法实现该功能(如果我说错了请指正).

所以我认为现在的解决方案是在控制器中观察“市场”并使用与 ngRepeat 中使用的控制器相同的代码创建新对象:

$scope.$watch('marketplaces', function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    $scope.linearMarketplaces = result;

  }, true);

在 HTML 中:

    <li ng-repeat="(key, value) in linearMarketplaces">
      {{key}}: {{value}}
    </li>

有两种解决方案的 Plunker:http://plnkr.co/edit/pYWFhqSqKAa9gpzek77P?p=preview http://plnkr.co/edit/pYWFhqSqKAa9gpzek77P?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angularjs ng-repeat 在两个级别上但只有一个输出 的相关文章

随机推荐