2016-08-30 42 views
0

我要自動選擇複選框,如果它已經在模型如何自動選擇角材料複選框中的現有數據?

我用下面的代碼

控制器

$scope.model = { 
    items: [{"key":1, "value": "One"},{"key":2, "value": "Two"},{"key":3, 
    "value": "Three"},{"key":4, "value": "Four"},{"key":5, "value": "Five"}] 
}; 
    $scope.selected = [{"key":2, "value": "Two"},{"key":5, "value": "Five"}]; 
    $scope.toggle = function(item, list) { 
    var idx = list.indexOf(item); 
    if (idx > -1) { 
     list.splice(idx, 1); 
    } else { 
     list.push(item); 
    } 
}; 

$scope.exists = function(item, list) { 
    return list.indexOf(item) > -1; 
}; 

HTML

<div flex="25" ng-repeat="item model.items"> 
    <md-checkbox ng-checked="exists(item, selected)" 
     ng-click="toggle(item, selected)"> 
    {{ item.value }} 
    </md-checkbox> 
</div> 

試圖存在但密鑰'2'和'5'的複選框'默認情況下未選中。

如果我將以下代碼,

$scope.exists = function (item, list) { 
for (var i = 0; i < list.length; i++) { 
     if (list[i].key === item.key) { 
      return true; 
     } 
    } 
    return false; 
}; 

它選擇2和5,而頁面加載,但無法取消支票兩種。其他1,3和4按預期工作。

回答

1

了我的頭頂部的解決方案

<div flex="25" ng-repeat="item model.items"> 
    <md-checkbox ng-model="item.selected" 
     ng-click="toggle(item, selected)"> 
    {{ item.value }} 
    </md-checkbox> 
</div> 

所以用NG-模型和

$scope.model = { 
    items: [{"key":1, "value": "One"},{"key":2, "value": "Two", selected: true},{"key":3, 
    "value": "Three"},{"key":4, "value": "Four"},{"key":5, "value": "Five", selected: true}] 
}; 

以後設置默認讓你只需要使用

$scope.model.items.filter(function(item){return item.selected}); 
所選項目
+0

感謝Tratto ....其實我會從服務器獲取「物品」的數據。是否需要通過添加「Selected:true」來修改它? – Prince

+0

假設如果我按照你的建議添加「selected」,當我嘗試保存數據時,我的$ scope.model.items看起來像[{「key」:2,「value」:「Two」,selected:true}, {「key」:5,「value」:「Five」,selected:true}]? – Prince

+0

如果是,那麼它會失敗,當我試圖保存在服務器端 – Prince