ng-repeat a single element over nested objects

Question

Say I have an object with keys corresponding to products and values corresponding to objects which in turn have keys corresponding to price points at which those products ha

Answer 1

ng-repeat does not currently have a possible way to complex iterate inside objects (the way it's possible in python). Check out the ng-repeat source code and note that the regex expression matched is:

(key, value) in collection - and that they push into the key array and assign to the value list, and so you cannot possibly have a complex ng-repeat sadly...

There are basically 2 types of solutions which were already answered here:

1. Nested ng-repeat like the first answer suggested.
2. Rebuilding your data object to fit 1 ng-repeat like the second answer suggested.

I think solution 2 is better as I like to keep my sorting & coding logic inside the controller, and not deal with it in the HTML document. This will also allow for more complex sorting (i.e based on price, amount, widgetName or some other logic).

Another thing - the second solution will iterate over possible methods of a dataset (as hasOwnProperty wasn't used there).

I've improved the solution in this Plunker (based on the finishingmove Plunker) in order to use angular.forEach and to show that the solution is rather simple but allows for complex sorting logic.

$scope.buildData = function() {

  var returnArr = [];

  angular.forEach($scope.data, function(productData, widget) {
      angular.forEach(productData, function( amount, price) {
        returnArr.push( {widgetName: widget, price:price, amount:amount});            
      });
  });
   //apply sorting logic here
  return returnArr;
};
$scope.sortedData = $scope.buildData();

and then in your controller:

    

      

        

          
thing
          
price
          
amount
        
      
      

      

        
{{ item.widgetName }}
        
{{ item.price|currency }}
        
{{ item.amount }}