angularjs NG重复两个层面上，但只有一个输出 [英] 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>

我想只有一个＆LT;立GT;＆LT; /李＆GT; 虽然水平，我通过循环。我为什么要这样说，这的原因是因为我需要的键从第一循环引用下水平环，仍然只有一个李。

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-重复=朋友的朋友|过滤器：SEARCHTEXT可以做我想做的，但我不知道，如果在过滤前pression我可以动态地指定键还是其他什么东西是需要的，而不是 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 ).

所以我的问题是，我可以实现我刚刚与过滤器或解释是没有这样做的另一种方式？

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>

但是unfortunally 当过滤器创建新元素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

如果没有与黑客$$哈希你无法实现这一功能对于现在的（请纠正我，如果我错了）的

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

所以我觉得对于现在的解决办法是在控制器收看交易市场，并使用相同的code作为控制器，在使用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

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