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

Question

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

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 实现我刚才解释的内容，还是有其他方法可以实现？

Answer 1

我希望我已经理解了问题：您希望在嵌套对象上有一个 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