Question

我有一个Laravel 5.1和Angular应用程序。

我从Laravel控制器返回一个对象集合到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时，上面找不到id。

这似乎是非常普遍的事情。我错过了什么？

谢谢！

Answer 1

如果您正在寻找其他方式并且可以使用ES6，请在您的功能中使用：

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

如果不是ES6，请使用常规的javascript语法代替=＆gt;

Answer 2

当前代码（不工作）：

$scope.addAlbum = function(album) {

    var id = {id: album.id};

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

它会创建一个新对象id并且比较失败。

我认为最简单的方法是创建一个临时的ID数组，然后比较id这是一种基本类型（不是对象）。

Answer 3

对于每个新专辑过滤器可用相册并检查结果长度，如果＆gt; = 1则不添加其他添加

var app = angular.module("test", [])
  .controller("testCtrl", function($scope) {
    $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.albums = [{
      "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": "Freaky Styley A New album name for test",
      "band": "RHCP"
    }, {
      "id": 5,
      "name": "Freaky Styley",
      "band": "RHCP A new Band"
    }]

    angular.forEach($scope.albums, function(currentAlbum) {
      var duplicates = $scope.availableAlbums.filter(function(el) {
        return el.name == currentAlbum.name && el.band == currentAlbum.band;
      }).length
      if (!duplicates) {
        console.log("PUSH ---->", duplicates);
        currentAlbum.id = $scope.availableAlbums.length+1
        $scope.availableAlbums.push(currentAlbum);
      } else {
        console.log("DONT PUSH ---->", duplicates);
      }
    });
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <ul>
    <li ng-repeat="album in availableAlbums">{{album.id}} - {{album.name}} - {{album.band}}</li>
  </ul>
</div>

试图避免将重复数据推入数组Angular

3 个答案: