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 object, and all it's children. I've done this with two ng-repeats which in theory seems pretty sound and fool-proof

Here's 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 like angular just brushed over the:

"$": "M"

It's almost as if angular just dismisses anything whose value isn't an object.

回答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.

回答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:

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

回答3:

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

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>

来源：https://stackoverflow.com/questions/33337469/ng-repeat-looping-partially-over-an-object