javascript - 动态加载项目的 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>

现在我有了一个用户对象。该对象内部有一个数组“cars”，我想在其中推送所有选定的汽车并在取消选择时将其删除。我的对象看起来像这样:

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

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

Answer 1

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

标记

<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;
}