Стараясь не помещать дубликаты в массив Angular

Question

Стараясь не помещать дубликаты в массив Angular

0

У меня есть приложение Laravel 5.1 и Angular.

Я возвращаю коллекцию объектов в Angular от моего контроллера Laravel. Затем я пытаюсь вытолкнуть новые объекты на эту переменную области видимости, но хочу избежать нажатия дубликата.

Возвращенная коллекция выглядит так:

$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-повтор другой коллекции;

$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);
    }
 }

Однако выше это не находит идентификатор, когда он существует в массиве.

Это похоже на то, что было бы довольно распространенным местом. Что мне не хватает?

Благодарю!

RushVan 29 июль 2016, в 15:02

Источник

Теги:

php

javascript

angularjs

laravel-5

3 ответа

0

Текущий код (не работает):

$scope.addAlbum = function(album) {

    var id = {id: album.id};

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

Он создает новый id объекта, и сравнение не выполняется.

Я думаю, что самый простой способ - создать временный массив идентификаторов, а затем сравнить id который является примитивным типом (а не объектом).

Michal Stefanow 29 июль 2016, в 11:09

0

Если вы ищете другой способ и можете использовать ES6, используйте его внутри своей функции:

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

Если не ES6, используйте обычный синтаксис javascript для функции вместо =>

ivp 29 июль 2016, в 10:41

Ещё вопросы

Vanojx1 · Accepted Answer · 2016-07-29T10-39-00.000Z

Для каждого нового фильтра альбома доступны альбомы и проверьте длину результата, если> = 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>

Благодаря Vanojx, это решение имело для меня наибольшее значение в моих ограниченных возможностях! Спасибо всем за ответы. Я перенес ваши решения на этот плункер - plnkr.co/edit/YpgS3INWBLNiT3IAqh1C?p=preview, чтобы показать, как я реализовал.