拼接从 AngularJS 中的 ng-repeat 中删除错误的对象

Splice removing wrong object from ng-repeat in AngularJS

本文关键字：删除 错误 对象 ng-repeat AngularJS 中的 拼接      更新时间：2023-09-26

我在视图中列出了一组名称，如下所示：

<div class="checkbox col-md-3" ng-repeat="staff in stafflist | orderBy: 'name'">
  <div class="checkboxinner">
    <button class="btn btn-staff form-control" 
            ng-show="!staff.chosen" 
            ng-click="pushStaff(staff)">
               {{staff.name}}
    </button> // visible when unselected, invisible when selected 
    <button class="btn btn-primary form-control" 
            ng-show="staff.chosen" 
            ng-click="unpushStaff(staff, $index)">
               {{staff.name}}
    </button> // visible when selected, invisible when unselected
  </div>
</div>

第一个按钮触发此功能，将对象添加到数组中，并替换为另一个应该充当切换的按钮（不同的颜色，相同的内容）。此功能完美运行。

$scope.paxlist = [];
$scope.pushStaff = function (staff) {
    staff.chosen = true;
    $scope.paxlist.push(
        {
            name: staff.name
        }
    );
    console.log($scope.paxlist);
};
基本上，当我单击时，我

添加对象，当我再次单击时，我删除它。这是删除功能：

$scope.unpushStaff = function (staff, $index) {
    staff.chosen = false;
    var index=$scope.paxlist.indexOf(staff)
    $scope.paxlist.splice(index,1);   
    console.log($scope.paxlist);
}

我的问题是 unpushStaff（） 确实会删除一个项目，但不是我点击删除的项目，而是另一个项目。

我错过了什么？

也许ng-show正在扰乱$index？

stafflist 中的staff条目和paxlist中的条目并不相同。基于以下模板：

    <button class="btn btn-staff form-control" 
        ng-show="!staff.chosen" 
        ng-click="pushStaff(staff)">
           {{staff.name}}
    </button> // visible when unselected, invisible when selected

很明显，stafflist中的每个staff条目都是某种对象，该对象至少具有一个属性name和另一个chosen。

当您推送到 paxlist 时，您将创建一个新对象，如下所示：

$scope.paxlist.push(
    {
        name: staff.name
    }
);

这很好。但是，当您随后删除它时，您正在通过以下方式寻找它：

    var index=$scope.paxlist.indexOf(staff)

其中staff是工作人员列表中的对象！当然，该对象在paxlist中不存在 - 您在上面派生的paxlist.push()是一个单独的对象 - 因此indexOf()返回-1，导致splice()删除paxlist上的最后一项。

相关文章：