angularjs ng-repeat 在两个级别上，但只有一个输出 [英] angularjs ng-repeat on two levels but just one output

问题描述

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

I have a big object that looks something like this :

scope.marketplaces = {

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

    ...

};

我想要做的是像这样循环遍历大对象:

What I'm trying to do is loop through the big object like this :

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

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

And inside the loop, loop again each object, but instead of appending to DOM something like :

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

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

尽管我一直在循环，但我只想拥有一个

.我想要它的原因是因为我需要第一个循环中的 key 在级别循环中被引用，并且仍然只有一个 li.

I would like to have just one <li></li> despite the level I'm looping through. The reason why I want it like that is because I need the key from the first loop to be referenced down the level loops and still have just one li.

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

I've read that ng-repeat="friend in friends | filter:searchText" could do what I want but I'm not sure if in the filter expression I can dynamically specify the key or something else that is needed instead of searchText ( I guess that is an already know property of the object ).

所以我的问题是，我可以通过 filter 实现我刚刚解释的内容，还是有其他方法可以做到?

So my question is, can I achieve what I just explained with the filter or is there another way of doing it ?

推荐答案

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

I hope I've understood question: you would like to have one ngRepeat on a nested object. So kind of linearize object.

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

First approach would be to create filter:

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 在过滤器中创建新元素时会出现问题.您可以在控制台中显示以下错误消息:

But unfortunally AngularJS have problems when in filter you create new elements. You can have error message in console kind of:

10 $digest iterations reached

如果不使用 $$hash 进行 hack，您现在无法实现该功能(如果我错了，请纠正我).

Without hacks with $$hash you can't achieve that functionality for now (Please correct me if I am wrong).

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

So I think for now the solution would be to watch 'marketplaces' in controller and create new object using same code as in controller that use in 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

Plunker with both solutions: http://plnkr.co/edit/pYWFhqSqKAa9gpzek77P?p=preview

这篇关于angularjs ng-repeat 在两个级别上，但只有一个输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！