javascript - ng-repeat looping partially over an object

Question

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>

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