Question

我正在开发一个简单的程序（在概念上），但不幸的是。我对这个问题很感兴趣，谷歌搜索的日子没有任何结果。

我试图遍历一个物体及其所有孩子。我用两个ng-repeat做了这个，理论上看起来非常合理且非常简单

这是我目前的代码：

＆＃13;

(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;
    };
  });

}());

＆＃13;

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

＆＃13;

如果你运行代码，它似乎只是刷过了：

"$": "M"

几乎就像角度只是解除了价值不是对象的东西。

Answer 1

你偶然发现了Angular的陷阱。

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

链接到Github issue（目前似乎是一个不做修复）：

示例小提琴： http://jsfiddle.net/takvg/4/

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

解决方法很简单：只需在Object.keys（myObject）
上进行ng-repeat

例如：

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

你将处理一个数组而不是一个对象，所以你的ng-repeat需要改变一点。

Answer 2

问题不是由于存在原始值，而是因为存在以$开头的属性，这表示角度为internal property (by convention) and need to skip it。假如你的密钥是不是以$开头的其他东西，它就可以正常工作。

如果你不能格式化对象，那么只需将对象的键获取到数组并迭代它。

喜欢的东西：

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

和

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

＆＃13;

(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;
    };

  });

}());

＆＃13;

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

＆＃13;

注意：ng-init并从范围内的函数获取重复值仅用于演示目的。如果在实际代码中你只想重复内部属性，你也可以通过遍历对象的键在控制器本身中构建一个值数组。这将有助于避免使用多个ng-repeat（除非您正在做其他事情以及2次重复）。

Answer 3

我说问题是你使用＆＃39; $＆＃39;作为财产名称。

另见：AngularJS and its use of Dollar Variables

＆＃13;

(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;
    };
  });

}());

＆＃13;

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

＆＃13;

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

3 个答案: