Question

我将几个对象数组推入一个空数组，然后我想在html上显示。

$scope.displaypersons = [
[{name: "abc"}],
[{name: "pqr"},{name: "lmn"},{name: "rst"}],
[{name: "uvw"},{name: "xyz"}]
]

在html中

<div ng-repeat="person in displaypersons"> 
  {{person}}
  <!-- {{person.name}} doesn't work -->
</div>

但在迭代之后，我就是这样：

[{"name": "abc"}]
[{"name": "pqr"},{"name": "lmn"},{"name": "rst"}]
[{"name": "uvw"},{"name": "xyz"}]

Answer 1

你有一个二维数组。 Angular只会迭代第一维。您需要person[i].name才能获得该属性。

或尝试：

<div ng-repeat="persons in displaypersons"> 
    <div ng-repeat="person in persons"> 
        {{person.name}}
    </div>
</div>

Answer 2

你有一个二维数组，你需要嵌套你的ngRepeats才能访问这些对象。

<div ng-repeat="personGroup in displaypersons">
  <div ng-repeat="person in personGroup">
    {{person.name}}
  </div>
</div>

Answer 3

您可以创建自定义滤镜，将2D阵列转换为平面阵列。

angular.module('myApp').filter("flatten", function() {
     function flatten (arr) {
         return arr.reduce(function(a, b) {return a.concat(b)});
     };
     return flatten;
});

HTML

<div ng-repeat="person in displaypersons | flatten"> 
     {{person.name}}
</div>

如何在angular中迭代数组数组中的对象

3 个答案: