javascript – 动态加载项目的ng-model

2019年7月28日 148次阅读

我有一个列表,其中包含一些动态的物品(例如汽车),所以它没有固定的长度.当我加载此列表时,它看起来像这样：

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: [] 
    }
];

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

最佳答案 您可以更新特定用户的汽车数组,更改每个项目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;
}
点赞