Ng-repeat partially overlaps an object

Question

I am developing a simple program (by concept), but unfortunately. I ran into a problem and the days of Google searches didn’t bring anything.

I try to go through an object, and all these are children. I did this with two ng-repeat , which in theory seem pretty simple and flawless

Here is my current code:

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

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

If you run the code, it seems that angular just brushed:

 "$": "M" 

It is almost as if angular simply rejects everything whose value is not an object.

Answer 1

You stumbled upon getcha in Angular.

Keys starting with a dollar sign ($) will not be recognized by ng-repeat ($ is a reserved character in angular and other front-end libraries).

Link to the Github issue (currently it seems this is not a fix):

Sample script: http://jsfiddle.net/takvg/4/

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

The workaround is simple: just do 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 will be dealing with an array instead of an object, so your ng-repeat will need to be slightly modified.

Answer 2

The problem is not due to the presence of a primitive value, but because of the presence of a property starting with $ , which indicates angular that this is its internal property (by convention) and you must skip it . Let's say if your key was something else that doesn't start with $ , it will work fine.

if you cannot format the object, then just get the keys of the object to the array and swipe through it.

Sort of:

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

and

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

 (function() { var CHEAT = 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) { return Object.keys(obj); } $scope.type = function(obj) { return typeof obj; }; }); }()); 

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

Note: ng-init and getting the value that needs to be repeated from a function in an area is used here for demonstration purposes only. If in your actual code you just want to repeat the internal properties, you can build an array of values ​​in the controller itself, iterating through the keys of the object. This will help avoid using multiple ng-repeat (unless you are doing something else with 2 repeats).

Answer 3

I would say that the problem is that you are using "$" as the name of the property.

see also: AngularJS and its use of dollar variables

 (function() { var CHEAT = 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) { return typeof obj; }; }); }()); 

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