angularjs - 将简单的选择/取消选择升级为我可以调用的正确数组

Question

我有一个 ng-repeat 显示用户可以“选择”的项目列表，我正在使用以下代码（精简示例）进行选择过程

<div class="panel" ng-class="{'titleSelected': titleSelected[$index]}" ng-repeat="item in listofitems">
<h1>{{item.name}}</h1>
<button class="btn btn-success" ng-click="titleSelected[$index] = !titleSelected[$index]">
<span ng-hide="titleSelected[$index]">Add to Buy List</span>
<span ng-show="titleSelected[$index]">Remove from Buy List</span>
</button>
</div>

现在这工作正常（我也有这个工作使用 item.id 来跟踪而不是 $index。我单击一个项目，由于 ng-class，背景改变了颜色，并且该按钮动态变成了一个删除按钮

但是我期望 titleSelected 是一个存储信息的数组，但我显然错了。我真正需要的是一个实时数组，可以在点击时存储/删除 item.id，而我已经完全错误地处理了这一切。

此外，当我使用过滤器（代码中未显示）时，如果选择了任何项目然后被过滤器隐藏..并带回它会失去其“选定”状态。

$index 和 item.id 都是这种情况

我怀疑需要带有 push 和 splice 的小功能，但我仍然需要 add remove 的简单功能。并与实际选择的内容完美同步

任何指针表示赞赏

编辑1：只需添加即可

$scope.titleSelected = [];

进入我的控制器，并使用 item.id 而不是 $index 我的应用程序现在是 1）记住过滤器更改之间的选定项目并创建一个我可以调用的数组。但是，该数组包含（在第一个选择中）每个项目的条目。

所以我有 503 个项目，第一次单击时数组长度跳到 912（不知道这个数字来自哪里）.. 其中大部分是空的，但是如果我单击 id=4 的项目，那么第四个条目变为 true IE

null,null,null,true,null...

标签： angularjsselectangularjs-ng-repeatangularjs-ng-click

Answer 1

完成了绑定到 ng-click 的几个函数

$scope.basket=[];

$scope.addToBasket = function(item) {
    $scope.basket.push(item);
};

$scope.removeFromBasket = function(item) {
    var index = $scope.basket.indexOf(item);
    if (index > -1) {
        $scope.basket.splice(index, 1);
    }
};

并在 HTML

<button ng-hide="titleSelected[item.id]" class="btn btn-success" 
ng-click="addToBasket(item.id);titleSelected[item.id] = !titleSelected[item.id]">
          Add to Buy List
        </button>

<button ng-show="titleSelected[item.id]" class="btn btn-success" 
ng-click="removeFromBasket(item.id);titleSelected[item.id] = !titleSelected[item.id]">
              Remove from Buy List
            </button>