检查数组内的对象值是否已经存在于不同的对象数组中？

Question

Plunker - http://plnkr.co/edit/jXdwOQR2YLnIWv8j02Yp

我正在使用 Angular 构建一个视图，其中包含主容器中的用户列表 (array-A) 和托管任何“选定”用户的用户侧边栏 (array-B)。

第一个 (A) 拥有所有用户。

[{ $$hashKey: "00F", id: "118207f5e52c3eb619a8760bc08c8224", 用户名: "John Smith" }, { $$hashKey: "00G", id: "9c2d6f31c88e7a654e64bd0d3371360a", 用户名: "Fredy Rincon" }, { ... }]

第二个 (B) 具有已选择的用户 (Firebase db) 并通过其预先填充侧边栏。如果用户已经被选中，那么他们会像在数组 A 中一样出现在这里。

我的目标是能够通过单击主容器中数组 A 中的项目来从数组 B/侧边栏视图中添加和删除对象。

下面是我所能得到的最接近的结果，但它没有考虑到预先填充到侧边栏上的现有用户，只是添加和删除已经存在的项目，就好像他们不在那里。

供您参考：

$scope.selectedUsers = 数组-B

user = 数组-A 中的对象

$scope.selectUser = function (user) {
  console.log($scope.selectedUsers.indexOf(user))
  if ($scope.selectedUsers.indexOf(user) === -1 ) {
    $scope.selectedUsers.push(user);
    console.log($scope.selectedUsers);
  } else {
    $scope.selectedUsers.splice($scope.selectedUsers.indexOf(user), 1);
    console.log($scope.selectedUsers);
  }
};

我真的不知道如何解决这个问题，非常感谢任何可能的帮助。

谢谢。

Answer 1

在添加前使用Array.prototype.reduce检查用户：

$scope.add = function(user){
  var match = $scope.selectedUsers.reduce(function(prev, curr) {
    return (user.id === curr.id) || prev;
  }, false);
  console.log(match ? 'match' : 'no match');
  if (!match) $scope.selectedUsers.push(user);
};

...您的视图如下所示：

<p ng-repeat="user in users">{{user.username}} <a ng-click="add(user)">+</a></p>

要从selectedUsers 数组中删除用户，请使用Array.prototype.splice：

$scope.remove = function(index){
  $scope.selectedUsers.splice(index, 1)
}

...您的视图如下所示：

<p ng-repeat="selectedUser in selectedUsers">{{selectedUser.username}}
<a ng-click="remove($index)">--</a></p>

Working Plunker

Answer 2

由于您的每个对象似乎都有一个唯一的字符串 ID，因此一种可行的方法是仅将 ID 存储在数组 A 和数组 B 中，将完整数据对象的字典存储在共享服务中，然后使用一个角度过滤器，用于在需要演示等时按 ID 查找完整的数据对象。