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>

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>

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.

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 ?

回答1:

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

and in thml:

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

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).

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

And in HTML:

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

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

来源：https://stackoverflow.com/questions/14921992/angularjs-ng-repeat-on-two-levels-but-just-one-output

标签

javascript

angularjs

ng-repeat