动态加载项目ng模型

我有一个列表中有一些项目（例如汽车），这是动态的，所以它没有固定的长度。当我打开这个名单看起来是这样的：动态加载项目ng模型

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

在那之后，我环路这份名单中的NG-重复循环，并创建一些复选框，这样我就可以选择项目：

<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模型，这非常合理。什么是最好的方法？没有在互联网上找到任何解决方案。

来源

2016-12-16 MrBuggy

AFAIK，ngModel经由如所陈述的参考[（文档）]（https://docs.angularjs.org/api结合/ ng/directive/ngChange），所以如果你重新分配任何通过ng-model绑定的值和一个新的引用，它应该更新和调整它引用的值。 –

这是回答您的问题吗？ http://stackoverflow.com/questions/14514461/how-to-bind-to-list-of-checkbox-values-with-angularjs –

您可以更新下面的每个项目itemList的checkbox的change的特定用户的cars阵列。

标记

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

来源

2016-12-16 15:58:11

嗨，这是完美的，谢谢！干杯。 – MrBuggy

@MrBuggy很高兴知道，谢谢:) –

动态加载项目ng模型

回答

相关问题