Ng-repeat Looping Partially Over An Object

I am developing a simple program (in concept) but unfortunately. I have com upon the problem and days of googling have not resulted in anything. I'm trying to loop through an objec

Solution 1:

You've stumbled across a gotcha in Angular.

Keys that begin with dollar sign ($) will not be recognized by an ng-repeat ($ is a reserved character in angular and other frontend libraries).

Link to the Github issue (currently seems to be a do-not-fix):

Example fiddle: http://jsfiddle.net/takvg/4/

From the github issue mentioned above, there is a workaround from frfancha:

Workaround is easy: just make your ng-repeat on Object.keys(myObject)

For instance:

$scope.thing = {
    "Globals": {
        "$": "M",
            "M": {
            "z": "q"
        }
    },
        "Other": {
        "S": {
            'c': "cat"
        }
    }
};
$scope.range = Object.keys($scope.thing);

You'll be dealing with an array instead of an object, so your ng-repeat will need to change a little bit.

Solution 2:

The issue is not due to the presence of a primitive value but because of the presence of the property starting with $, which indicated angular that it is its internal property (by convention) and need to skip it. Say if your key has been something else that does not start with $, it would work fine.

if you cannot format the object then just get the keys of the object to an array and iterate over it.

Something Like:

<divng-repeat="prop in getKeys(range)"ng-init="value=range[prop]">
    {{prop}} =
    <divng-repeat="key in getKeys(value)"ng-init="rangeValue=value[key]">
      {{key}}: {{rangeValue}}
    </div></div>

and

$scope.getKeys = function(obj) {
    returnObject.keys(obj);
 } 

(function() {

  varCHEAT = angular.module('cheat', []);
  CHEAT.controller('maps', function($scope) {
    $scope.search = "";

    $scope.range = {
      "Globals": {
        "$": "M",
        "A": "Test",
        "M": {
          "z": "q"
        }
      },
      "Other": {
        "S": {
          'c': "cat"
        }
      }
    };
       
    $scope.getKeys = function(obj) {
      returnObject.keys(obj);
    }

    $scope.type = function(obj) {
      returntypeof obj;
    };

  });

}());

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script><divid="info"ng-app="cheat"ng-controller="maps"><divng-repeat="prop in getKeys(range)"ng-init="value=range[prop]">
    {{prop}} =
    <divng-repeat="key in getKeys(value)"ng-init="rangeValue=value[key]">
      {{key}}: {{rangeValue}}
    </div></div></div>

Note: ng-init and getting the value to repeat from a function on the scope is used here only for demonstration purpose. If in your actual code you just want to repeat over the inner properties you might as well build an array of values in the controller itself by iterating through the object's keys. It will help avoiding using multiple ng-repeat as well (unless you are doing something else as well with 2 repeats).

Solution 3:

I'd say the problem is woth your use of '$' as property name.

see also: AngularJS and its use of Dollar Variables

(function() {

  varCHEAT = angular.module('cheat', []);
  CHEAT.controller('maps', function($scope) {
    $scope.search = "";
    $scope.range = {
      "Globals": {
        "testme": "M",
        "M": {
          "z": "q"
        }
      },
      "Other": {
        "S": {
          'c': "cat"
        }
      }
    };
    $scope.type = function(obj) {
      returntypeof obj;
    };
  });

}());

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divid="info"ng-app="cheat"ng-controller="maps"><divng-repeat="(res, prop) in range">
    {{prop}} =
    <divng-repeat="(key,test) in prop">
      {{key}}: {{test}}
    </div></div></div>