angularjs ng在两个级别上重复，但只有一个输出

angularjs ng-repeat on two levels but just one output

本文关键字：输出 有一个 ng 两个 angularjs      更新时间：2023-09-26

我有一个看起来像这样的大对象：

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;
  };
});

在thml中：

<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

相关文章：