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

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数据库),并且通过该用户预先填充了侧边栏.如果用户已经被选中,那么它们就像在数组A中一样出现在这里.

我的目标是通过单击主容器中array-A中的项目,从array-B/Sidebar视图中添加和删除对象.

以下是我能够获得的尽可能接近,但它没有考虑预先填充到侧边栏上的现有用户,只是添加和删除已经存在的项目,就好像它们不是那里.

供你参考:

$ scope.selectedUsers = array-B

array = A中的user = object

$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>

工作的Plunker