javascript - ng-repeat 在对象上部分循环

Question

我正在开发一个简单的程序(概念上)，但不幸的是。我已经发现了这个问题，几天的谷歌搜索没有得到任何结果。

我正在尝试循环遍历一个对象，并且它都是子对象。我已经用两个 ng-repeat 完成了这项工作，理论上看起来相当合理且万无一失

这是我当前的代码:

(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>

如果你运行代码，看起来 Angular 刚刚刷过:

"$": "M"

这几乎就像 Angular 只是忽略了任何值不是对象的东西。

Answer 1

您偶然发现了 Angular 中的一个陷阱。

以美元符号 ($) 开头的键不会被 ng-repeat 识别($ 是 Angular 和其他前端库中的保留字符)。

链接到Github issue (目前似乎无法修复):

fiddle 示例: http://jsfiddle.net/takvg/4/

从上面提到的github问题中，frfancha有一个解决方法:

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

例如:

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

您将处理一个数组而不是一个对象，因此您的 ng-repeat 需要稍微改变。