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

staff中的stafflist条目和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

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

当您按下paxlist时，您正在创建一个 new 对象，如下所示：

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

这很好。但是当你来删除它时，你正在寻找它：

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

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

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

1 个答案: