Question

我创建了一个用户可以选择/取消选择员工的页面。我使用.push将这些员工添加到数组users。我还使用.splice从数组中删除未经检查的项目。目前，取消选中最后一个选中的项目可以正常工作，但是，如果我选择多个项目并取消选中视图中显示的第一个项目，它将删除数组中的每个项目。

这是HTML：

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <table>
      <tr ng-repeat="user in users">
        <td><input type="checkbox" ng-model="checked" ng-change="addremoveuser(checked, user.ID)"><td>
        <td>{{user.Title}}</td>
        <td>{{user.FirstName}}</td>
        <td>{{user.LastName}}</td>
      </tr>
    </table>
  </div>
</div>

这是JS：

var app = angular.module('myApp', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $http, $q){
    var users = [];
    $scope.addremoveuser = function (checked, id) {
        if (checked) {
            console.log("user selected", id);
            users.push(id)
            console.log("if test", users);
        }
        else {
            console.log("user unselected", id);
            var index = users.indexOf(id);
            users.splice(index);
            console.log("else test", users);
        }
    };
});

如何解决此问题仅删除未选中的项目？

Answer 1

users.splice(index);

应该是：

users.splice(index, 1);

查看文档：

Array.splice()

另外，请注意id是什么。在数组中它是一个名为的元素或元素的实际ID 吗？如果它在数组中的元素id不需要indexOf(id)。

Answer 2

拼接和改变数组有点危险。帮助添加/删除用户的一种策略是使用filter。

var users = [];
$scope.addremoveuser = function (checked, id) {
    if (checked) {
        console.log("user selected", id);
        users.push(id)
        console.log("if test", users);
    }
    else {
        console.log("user unselected", id);
        users = users.filter(function(user) {
          return user.id === id;
        }
        console.log("else test", users);
    }

使用.splice从数组中删除项目是删除多个对象

2 个答案: