javascript - 尝试避免将重复项插入数组 Angular

Question

我有 Laravel 5.1 和 Angular 应用程序。

我正在从 Laravel Controller 将对象集合返回到 Angular。然后，我尝试将新对象推送到该作用域变量上，但希望避免推送重复对象。

返回的集合如下所示；

$scope.albums = [
{"id": 1,
 "name": "Pork Soda",
 "band": "Primus"}
{"id": 2,
 "name": "Fly by Night",
 "band": "Rush"}
{"id": 3,
 "name": "Freaky Styley",
 "band": "RHCP"}
]

然后我展示另一个集合的 ng-repeat；

$scope.availableAlbums = [
{"id": 1,
 "name": "Pork Soda",
 "band": "Primus"}
{"id": 2,
 "name": "Fly by Night",
 "band": "Rush"}
{"id": 3,
 "name": "Freaky Styley",
 "band": "RHCP"}
{"id": 4,
 "name": "Zenyatta Mondatta",
 "band": "The Police"}
{"id": 5,
 "name": "2112",
 "band": "Rush"}
{"id": 6,
 "name": "Truth and Soul",
 "band": "Fishbone"}
]

现在我有一个函数，允许用户将 $scope.availableAlbums 添加到 $scope.albums。问题是，我不希望能够允许添加重复的专辑。我在重复上使用了一个独特的过滤器，它可以阻止显示重复项，但实际上并不能阻止它被添加到数组中。

我尝试过使用indexOf参数，但似乎无法让它停止重复。

我现在正在尝试查找推送对象的索引，如果找到，则不要推送；

$scope.addAlbum = function(album) {

    var id = {id: album.id};

    if (!(id in $scope.albums)){
        $scope.albums.push(album);
    }
 }

但是，当 id 确实存在于数组中时，上面的代码并没有找到它。

这似乎是很常见的事情。我错过了什么？

谢谢!

Answer 1

如果您正在寻找其他方式并且可以使用 ES6，请在您的函数中使用它:

if(!$scope.albums.some(e => e.id == album.id))
   $scope.albums.push(album);

如果不是 ES6，请使用函数的常规 javascript 语法而不是 =>