動態加載項目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模型

回答

相關問題