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

Question

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

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

Answer 1

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 上的最后一项。