Angular ng-repeat - 如何加入或合并来自不同阵列的数据

Question

我想加入/合并两个角度为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需要

我会用angulars过滤器：

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

到：

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

我们这里做的是采取阵列authors和filter它通过表达'id': book.id_author和我们采取的.name这个过滤的第一个元素（[0]）。

以防万一，你可以检查，如果你确实有笔者数组中：

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

问候

PS（编辑）：拨弄角1.2.6 - >http://jsfiddle.net/gqqv9k38/1/

Answer 2

1. 可以创建自定义findAuthor方法
2. 使用共同filter与strict准确地选择所需笔者id，而不是类似

angular.module('app',[]) 
 
.controller('ctrl', function($scope){ 
 

 
    $scope.authors = [{ 
 
    id: "1", 
 
    name: "John" 
 
    }, { 
 
    id: "11", 
 
    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" 
 
    }]; 
 
    
 
    
 
    $scope.findAuthor = function(id){ 
 
    return $scope.authors.find(function(x){ 
 
\t  return x.id == id 
 
    })}; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<h4>1. findAuthor metod</h4> 
 
<div ng-app='app', ng-controller='ctrl'> 
 
    <div ng-repeat="book in books"> 
 
     <div>Book title: {{book.name}}</div> 
 
     <div>Authors name: {{findAuthor(book.id_author).name}}</div> 
 
     <hr> 
 
    </div> 
 
    
 
<h4>2. With help of filter</h4>  
 
    <div ng-repeat="book in books"> 
 
    <div>Book title: {{book.name}}</div> 
 
    <div>Authors name: {{(authors | filter: {'id': book.id_author}: strict)[0].name}}</div> 
 
    <hr> 
 
    </div> 
 

 
</div>

Answer 3

你可以这样做：

<div ng-repeat="book in books"> 
    <div>Book title: {{book.name}}</div> 
    <div>Authors name: {{getAuthorName(book.id_author)}}</div> 
</div> 

在JS：

$scope.getAuthorName(id) { 
    var name; 
    name = $scope.authors.find(function(author) { 
     if(author.id_author === id) { 
      return author.name; 
     } 
    }) 
    return name; 
} 

希望这有助于:)

Answer 4

创建功能和过滤ñ根据AME到ID

$scope.getName = function(obj){ 

    return $scope.authors.find(o=>{ 
     if(o.id == obj.id_author){return o } 
    }) 
    } 

这样称呼它

<div ng-controller="MyCtrl"> 
    <div ng-repeat="book in books"> 
    <div>Book title: {{book.name}}</div> 
    <div>Authors name: {{getName(book).name}}</div> 
    <hr> 
    </div> 
</div> 

Demo

Answer 5

你既可以JSON数据合并到新阵列

var newArray= authors.map(x => Object.assign(x, books.find(y => y.id == x.id))); 

Answer 6

你可以简单的比较值和将其添加到books模型。这是可以做到，如下所示：

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" 
 
     }]; 
 
     
 
     
 
     for(var i = 0; i < $scope.books.length; i++){ 
 
      var id = $scope.books[i].id_author; 
 
      for(var j = 0; j < $scope.authors.length; j++){ 
 
       if($scope.authors[j].id == $scope.books[i].id_author){ 
 
       $scope.books[i].authorName = $scope.authors[j].name; 
 
       } 
 
      } 
 
     } 
 
     
 
    } 
 

 

 

 

 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app = "myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
     <div ng-repeat="book in books"> 
 
      <div>Book title: {{book.name}}</div> 
 
      <div>Authors name: {{book.authorName}}</div> 
 
      <hr> 
 
     </div> 
 
    </div> 
 
</html>

Answer 7

这是你的答案，与演示:)你的作者数组必须在我的情况下排序;）

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.2.23/angular.min.js"></script> 
 
<html ng-app="myApp"> 
 
<div ng-controller="MyCtrl"> 
 
    <div ng-repeat="book in books"> 
 
    <div>Book title: {{book.name}}</div> 
 
    <div>Authors name: {{authors[book.id_author -1].name}}</div> 
 
    <hr> 
 
    </div> 
 
</div> 
 

 
</html>

Answer 8

这是你的问题的最优化的解决方案。

把下面的代码在你的控制器文件 -

$scope.entries = []; 
angular.forEach($scope.books,function(entry) { 
    var author_name; 
    var searchField = "id"; 
    var searchVal = entry.id_author; 
    author_name = getAuthorName(searchField,searchVal,$scope.authors) 
    $scope.SubInformation['author_name'] = author_name; 
    $scope.entries.push(angular.extend(entry,$scope.SubInformation); 
}); 

function getAuthorName(searchField,searchVal,authors){ 
    for (var i=0 ; i < authors.length ; i++) 
    { 
     if (authors[i][searchField] == searchVal) { 
      return authors[i]['name']; 
     } 
    } 
} 

并与下面的代码更新视图文件：

<div ng-controller="MyCtrl"> 
    <div ng-repeat="book in entries"> 
    <div>Book title: {{book.name}}</div> 
    <div>Authors name: {{book.author_name}}</div> 
    <hr> 
    </div> 
</div>