对数组的关联数组进行ng-repeat？答案

【问题标题】：ng-repeat over an associative array of arrays?对数组的关联数组进行ng-repeat？
【发布时间】：2016-05-23 20:37:44
【问题描述】：

我正在尝试使用数组的关联数组以角度设置嵌套重复。例如我有这样的结构：

集合['key1'] = [obj1,obj2,obj3,obj4];

集合['key2'] = [obj5,obj6,obj7];

我想要一个结构如下的视图：

<div ng-repeat="collection in collections">
  <h4>{{collection.id}}</h4>
  <div ng-repeat="item in collection">
     <span>{{item.name | item.value}}</span>
  </div>
</div>

但是，一旦我添加 ng-repeat="collection in collections"，我的视图就会变成空白。有没有办法以角度来做到这一点，或者如果我想以这种方式循环它，我是否需要更新我存储数据的方式？谢谢。

【问题讨论】：

如果我们能看到更多你的代码会很有帮助...你有一些错误信息吗？
尝试ng-repeat="(key,value) in collections"，然后遍历值对象。
很遗憾，我的页面上什么也没有，但控制台没有错误。
这是因为当您尝试打印 {{collection.id}} 因为集合是一个数组并且没有 id 作为属性时，它会失败。您正在尝试打印数组的索引。检查这个 plunkr，我在集合内的项目中打印名称。 plnkr.co/edit/UR6Fju?p=preview

标签： javascript arrays angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

只是给你一个如何使用它的例子

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.school = {
      classes:[
        {name:"Class 1", peoples:["Peter","Sue","Marc"]},
        {name:"Class 2", peoples:["John","Edward","Sara"]}
      ]
    }
});

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 
<div ng-repeat="class in school.classes">
  <h4>{{class.name}}</h4>
  <div ng-repeat="person in class.peoples">
    <label>{{person}}</label>
  </div>
  <br>
</div>
</div>

</body>
</html>

【讨论】：

谢谢，我会接受这个答案，因为它确实解决了问题。我的错误是我将外部集合声明为数组 [] 而不是对象 {}，因此在更改之前我无法 ng-repeat (key,value)。