[英]AngularJS - Set Checkbox on Checked when Value is true
i got a user json object: 我有一个用户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'
}
]
}
];
View in that i want to repeat Check: 鉴于我想重复检查:
<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>
What i found on Angular Material Website (I Shorten the Code): http://codepen.io/BamiGorengo/pen/KrGQEw 我在Angular Material网站上找到的内容(我简称为代码): http : //codepen.io/BamiGorengo/pen/KrGQEw
Here it works, the Checkbox is Checked when the Page Loads. 在这里工作,在页面加载时选中复选框。 I understand that it comes from the $scope.data = {};
我了解它来自$ scope.data = {};。 When i remove in the codpen website, then the checkbox dont show the correct style to...
当我在codpen网站上删除时,复选框未显示正确的样式来...
I tryed to add to my userService: 我试图添加到我的userService中:
$scope.types.check.value = {};
But this dont help... My JavaScript Skills are realy Bad. 但这无济于事...我的JavaScript技能真的很糟糕。
删除值字段中的单引号:)'value':'false'=>'value':false
The problem is that your type.value is not a boolean, it is a string. 问题是您的type.value不是布尔值,而是字符串。 This means that the first time it loads the checkboxes, it does not recognize the strings 'true' and 'false' as booleans.
这意味着第一次加载复选框时,不会将字符串“ true”和“ false”识别为布尔值。 Try this:
尝试这个:
<md-checkbox ng-model="cat.value" ng-true-value="true" ng-false-value="false">
And check https://material.angularjs.org/latest/api/directive/mdCheckbox for more info as to what this does. 并检查https://material.angularjs.org/latest/api/directive/mdCheckbox以获取有关此功能的更多信息。
Or make the values booleans instead of strings if you can. 或者,如果可以的话,将值设为布尔值而不是字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.