如何在“角度材質”復選框中自動選擇現有數據？

Question

如果模型中已經存在該復選框，我想自動選擇該復選框

我嘗試了以下代碼

控制者

$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正常工作。

Answer 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-model並設置默認值

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