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

Question

我在我的 View 中列出了一个名称数组，如下所示:

<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 和另一个 选择。

当您推送到 paxlist 时，您正在创建一个看起来像这样的新对象:

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

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

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

staff 是 stafflist 中的对象!当然，该对象在 paxlist 中不存在 - 您在上面派生的单独对象 paxlist.push() 是 - 因此 indexOf() 返回 - 1，引导 splice() 删除 paxlist 上的最后一项。