如何自动选择角材料复选框中的现有数据?
问题描述:
我要自动选择复选框,如果它已经在模型如何自动选择角材料复选框中的现有数据?
我用下面的代码
控制器
$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按预期工作。
答
了我的头顶部的解决方案
<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});
所选项目
感谢Tratto ....其实我会从服务器获取“物品”的数据。是否需要通过添加“Selected:true”来修改它? – Prince
假设如果我按照你的建议添加“selected”,当我尝试保存数据时,我的$ scope.model.items看起来像[{“key”:2,“value”:“Two”,selected:true}, {“key”:5,“value”:“Five”,selected:true}]? – Prince
如果是,那么它会失败,当我试图保存在服务器端 – Prince