訪問陣列內的陣列（NG-重複）

Question

我有一個數據結構是這樣的：

[ 
    {firstName: "John", 
    secondName: "Smith", 
    children: ["Fred", "Hannah"] 
    }, 
    {firstName: "Daniel", 
    secondName: "Evans", 
    children: ["Maggie", "Eddie", "Maria"] 
    } 
] 

我想使用納克重複返回每個人對象的孩子，在一個連續的列表。

像這樣：

<ul>  
    <li>Fred</li> 
    <li>Hannah</li> 
    <li>Maggie</li> 
    <li>Eddie</li> 
    <li>Maria</li> 
</ul> 

誰能幫助？

Answer 1

您可以在將數據結構呈現給ng-repeat之前將其數據結構reduce。

var app = angular.module('myApp', [ 
 
    'my.controllers' 
 
]); 
 

 
var controllers = angular.module('my.controllers', []); 
 

 
controllers.controller('MyController', function($scope) { 
 
    var people = [{ 
 
    firstName: "John", 
 
    secondName: "Smith", 
 
    children: ["Fred", "Hannah"] 
 
    }, { 
 
    firstName: "Daniel", 
 
    secondName: "Evans", 
 
    children: ["Maggie", "Eddie", "Maria"] 
 
    }, { 
 
    firstName:"Childless", 
 
    secondName: "Parent" 
 
    }, 
 
    { 
 
    firstName:"Jeff", 
 
    secondName: "Pasty", 
 
    children: ["Mike"] 
 
    }]; 
 

 
    $scope.allChildren = people.reduce(function(a, b) { return a.concat(b.children) },[]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyController"> 
 
    <div ng-repeat='child in allChildren'>{{ child }}</div> 
 
    </div> 
 
</div>