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

Solution 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() {
  returnfunction(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:

<ling-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:

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

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