动态加载项的ng模型

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>

现在我有一个用户对象。这个对象里面有一个数组“cars”，我想在其中推送所有选定的汽车，如果我取消选择它，请将其删除。我的对象看起来像这样：

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

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

Answer 1

您可以更新特定用户的汽车数组，在每个项目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;
}