AngularJS-当Value为true时，将复选框设置为选中
AngularJS - Set Checkbox on Checked when Value is true
我得到了一个用户json对象：
var users = [
{
firstName: 'Sven',
lastName: 'Butzbak',
userID: '1', // TODO refactor to _id
gender: 'male',
avatar: 'imageurl',
notice: 'Fast fertig mit Theorie',
'types': [
{
'type': 'am',
'title': 'AM',
'icon': 'am',
'minAge': '16 Jahre',
'include-classes': 'keine',
'check': [
{
'id': '1',
'name': 'Motor anlassen',
'value': 'false'
},
{
'id': '2',
'name': 'Los fahren',
'value': 'true'
},
{
'id': '3',
'name': 'Spiegel einstellen',
'value': 'true'
},
{
'id': '4',
'name': 'Vorgespräch',
'value': 'false'
}
],
'rating': [
{
'id': '1',
'name': 'Ausfahrt verlassen',
'rating': '1'
},
{
'id': '2',
'name': 'Pokemon zocken beim Fahren',
'rating': '2'
},
{
'id': '3',
'name': 'Mitbürger beleidigen',
'rating': '3'
}
]
},
{
'type': 'a1',
'title': 'A1',
'icon': 'a1',
'minAge': '16 Jahre',
'include-classes': 'keine',
'ckeckCategory': [
{
'id': '1',
'name': 'Motor anlassen',
'value': 'true'
},
{
'id': '2',
'name': 'Los fahren',
'value': 'false'
}
],
'ratingCategory': [
{
'id': '1',
'name': 'Ausfahrt verlassen',
'rating': '1'
},
{
'id': '2',
'name': 'Pokemon zocken beim Fahren',
'rating': '2'
},
{
'id': '3',
'name': 'Mitbürger beleidigen',
'rating': '3'
}
]
},
{
'type': 'a2',
'title': 'A2',
'icon': 'a2',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'a',
'title': 'A',
'icon': 'a',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'b-bf17',
'title': 'B-BF17',
'icon': 'b-bf17',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'b96',
'title': 'B96',
'icon': 'b96',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'be',
'title': 'BE',
'icon': 'be',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'c1',
'title': 'C1',
'icon': 'c1',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'c1e',
'title': 'C1E',
'icon': 'c1e',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'c',
'title': 'C',
'icon': 'c',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'ce',
'title': 'CE',
'icon': 'ce',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'd1',
'title': 'D1',
'icon': 'd1',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'd1e',
'title': 'D1E',
'icon': 'd1e',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'd',
'title': 'D',
'icon': 'd',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'de',
'title': 'DE',
'icon': 'de',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 't',
'title': 'T',
'icon': 't',
'minAge': '16 Jahre',
'include-classes': 'keine',
},
{
'type': 'l',
'title': 'L',
'icon': 'l',
'minAge': '16 Jahre',
'include-classes': 'keine',
}
],
'events': [
{
'id': 1,
'name': 'Fahrstunde',
'date': '26.07.2016',
'time': '08:45'
},
{
'id': 2,
'name': 'Theorie Stunde',
'date': '29.07.2016'
}
]
}
];
视图中我想重复检查：
<ul class="user-progress check" ng-repeat="types in user.types">
<fieldset class="standard">
<legend>Fragen</legend>
<li ng-repeat="cat in types.check">
<div>{{cat.name}}</div>
<div>
<md-checkbox ng-model="cat.value">
{{cat.value}}
</md-checkbox>
</div>
</li>
</fieldset>
</ul>
我在Angular Material网站上发现了什么(我缩短了代码(：http://codepen.io/BamiGorengo/pen/KrGQEw
在这里，当页面加载时，复选框是选中的。我知道它来自$scope.data={}；当我在codpen网站中删除时，复选框不会显示正确的样式…
我试图添加到我的用户服务：
$scope.types.check.value = {};
但这无济于事。。。我的JavaScript技能真的很差。
通过值字段删除单个引号：('value'：'false'=>'value':false
问题是type.value不是布尔值，而是字符串。这意味着它第一次加载复选框时，不会将字符串"true"answers"false"识别为布尔值。试试这个：
<md-checkbox ng-model="cat.value" ng-true-value="true" ng-false-value="false">
然后检查https://material.angularjs.org/latest/api/directive/mdCheckbox了解更多有关此功能的信息。
或者，如果可以的话，让值变成布尔值而不是字符串。
相关文章：
- 如何在angularJS中编辑时，如果DB中的值为true，则设置复选框，如果值为false，则取消选中复选框
- 余烬操作阻止设置复选框值
- 用于在dojo中动态设置复选框值(如已选中）的语法
- 根据 ajax 响应中的值设置复选框状态
- 设置复选框，当单选按钮与挖空更改时
- Angularjs 设置复选框为 true
- 如何设置复选框值以及如何在javascript中获取复选框值
- 动态设置复选框标签文本会导致复选框中的样式问题
- jQuery设置复选框更改时的下拉值
- Javascript/JQuery设置复选框的值，同时禁用其他复选框
- 如何使用jsTree设置复选框
- 根据服务器响应设置复选框
- Mootools FormCheck -设置复选框时需要一个字段
- 可以't设置复选框选中| JavaScript
- 未设置复选框，已与主体负载上的匹配值进行了检查
- 需要根据模型数据中的字符串设置复选框
- 如何在angularjs中使用css设置复选框的颜色
- 如何设置“复选框”使用javascript从treeview检查
- 设置复选框选择范围的限制
- 设置复选框样式的Angular指令
