将一个简单的select/unselect升级到我可以调用的适当数组中

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都是这种情况

我怀疑与推送和拼接的小功能是必需的，但我也仍然需要添加和删除的简单功能以及。并与实际选择的内容完全同步

感谢您的任何指点

编辑1:只需添加

$scope.titleSelected = [];

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

所以我有503个条目，第一次单击时数组长度跳到912 (不知道这个数字是从哪里来的)。大多数都是空的，但是如果我用id=4点击项目，那么第四个条目就变成了真

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

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>