javascript - Angular ng-repeat - 如何连接或组合来自不同数组的数据

Question

我正在尝试在 Angular ng-repeat 中加入/合并两个数组。

简单的示例书籍/作者，我想在其中打印带有相应作者姓名的书名。

书籍在一个数组中，作者在另一个数组中。

如何在这个例子中加入数据？

JSFiddle:http://jsfiddle.net/1jxsh0x3/

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

function MyCtrl($scope) {

  $scope.authors = [{
    id: "1",
    name: "John"
  }, {
    id: "2",
    name: "Peter"
  }, {
    id: "3",
    name: "Mark"
  }];
  
  $scope.books = [{
    id: "1",
    id_author: "3",
    name: "Book Lorem"
  }, {
    id: "2",
    id_author: "1",
    name: "Book Ipsum"
  }, {
    id: "3",
    id_author: "1",
    name: "Book Dark"
  }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <div ng-repeat="book in books">
    <div>Book title: {{book.name}}</div>
    <div>Authors name: {{authors[$index].name}}</div>
    <hr>
  </div>
</div>

Answer 1

编辑:至少需要 AngularJS 1.2

我会使用 Angular 过滤器:

<div>
    Authors name: {{authors[$index].name}}
</div>

到:

<div>
    Authors name: {{(authors | filter:{'id': book.id_author}:true)[0].name}}
</div>

我们在这里做的是获取数组 authors 并通过表达式 'id': book.id_author filter 然后我们获取此过滤的第一个元素的 .name ([0])。

以防万一你可以检查你的数组中是否真的有作者:

<div>
    Authors name: {{(authors | filter:{'id': book.id_author}:true) 
                     ? (authors | filter:{'id': book.id_author}:true)[0].name
                     : 'Unknown'}}
</div>

最好的问候

PS(编辑):摆弄 Angular 1.2.6 -> http://jsfiddle.net/gqqv9k38/1/