用于动态加载项目的 ng-model

Question

我有一个包含一些动态项目（例如汽车）的列表，因此它没有固定长度。当我加载这个列表时，它看起来像这样：

itemList = [
    { id: 0, name: 'bmw' },
    { id: 1, name: 'audi' },
    { id: 3, name: 'vw' },
    { id: 4, name: 'subaru' },
    { id: 5, name: 'mercedes' }
];

之后，我在 ng-repeat 循环中循环这个列表并创建一些复选框，以便我可以选择项目：

<div class="item" ng-repeat="item in itemList">
    <input type="checkbox">
    <label>{{item.name}}</label>
</div>

现在我有一个用户对象。这个对象里面有一个数组“汽车”，如果我取消选择它，我想推所有选定的汽车并删除它。我的对象如下所示：

userObj = [
    { 
      name: 'user1', 
      cars: [] 
    }
];

所以当我选择一辆车时，它应该被推入我的用户对象中的数组cars，如果我取消选择它，它也会被删除。我知道我必须用ng-change 来做这件事，这不是我真正的问题。我的问题是复选框的ng-model。我不知道如何做到最好。我不能对每个列表都使用相同的 ng-model，这是非常合乎逻辑的。最好的方法是什么？网上没找到解决办法。

Answer 1

您可以更新特定用户的cars 数组，在每个项目checkbox 的change 上itemList，如下所示。

标记

<div class="item" ng-repeat="item in itemList">
    <input type="checkbox" ng-model="item.checked" ng-change="itemChange(user)">
    <label>{{item.name}}</label>
</div>

代码

$scope.itemChange = function(user){
   var selectedCarsIds = $scope.itemList.filter((i) => i.checked).map(item => item.id)
   //update cars array for specific user
   user.cars = selectedCarsIds;
}