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

user = object in array-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和array-B中存储ID，在共享服务中存储完整数据对象的字典，并使用一个角度过滤器，用于在需要进行演示时按ID查找完整数据对象

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

2 个答案: