将布尔复选框 ng-model 添加到对象 AngularJS [英] Add boolean checkboxes ng-model to object AngularJS
问题描述
我正在尝试做一些类似于树复选框的事情.我想为检查名称的孩子添加布尔值:例如.单击 name
处的复选框后:eva
- 她的所有孩子也将被检查.像这样:
$scope.messages ={家庭": [{"name": "eva",检查":真的,孩子们的": [{"name": "约翰",检查":真的,孩子们的": [{"name": "雅各",检查":真的,}
我的代码:
<ul ng-repeat="(x, y) in key" style="list-style:none;"><li><input type="checkbox" ng-model="y.check" ng-change="changeValue(shapes, y.name)"/>{{y.name}} {{y.check}}<li style="margin-left:15px;"ng-repeat="(a,b) in y.childrens"><input type="checkbox" ng-model="b.check" ng-change="changeValue(shapes, b.name)"/>{{b.name}} {{b.check}}<ul style="margin-left:15px;"ng-repeat="p in b.childrens"><li><input type="checkbox" ng-model="p.check" ng-change="changeValue(shapes, p.name)"/>{{p.name}} {{p.check}}
这是我的 plnkr:http://plnkr.co/edit/lFYUvcTt1W709vam5Dfv?p=预览
我分叉了你的 pinkr
如你所见,我更新了 ng-change
中的孩子,这个函数是递归的,所以所有孩子都会被检查
$scope.changeValue = function(foo, person) {for(var i in person.childrens){person.childrens[i].check = person.check;$scope.changeValue(foo, person.childrens[i]);}};
如果一个人被检查,孩子将被检查.如果孩子被检查,它不会更新父母.
I am trying to do something like tree-checkboxes.
I would like to add boolean to children of checked name : ex. after click checkbox at name
: eva
- all her childrens will be also checked.
Like that :
$scope.messages =
{
"family": [
{
"name": "eva",
"checked" : true,
"childrens": [
{
"name": "John",
"checked" : true,
"childrens": [
{
"name": "Jacob",
"checked" : true,
}
My code :
<div ng-repeat="key in messages">
<ul ng-repeat=" (x, y) in key" style="list-style:none;">
<li>
<input type="checkbox" ng-model="y.check" ng-change="changeValue(shapes, y.name)" /> {{y.name}} {{y.check}}</li>
<li style="margin-left:15px;" ng-repeat="(a,b) in y.childrens">
<input type="checkbox" ng-model="b.check" ng-change="changeValue(shapes, b.name)" /> {{b.name}} {{b.check}}
<ul style="margin-left:15px;" ng-repeat="p in b.childrens">
<li>
<input type="checkbox" ng-model="p.check" ng-change="changeValue(shapes, p.name)" /> {{p.name}} {{p.check}}</li>
</ul>
</li>
</ul>
</div>
Here is my plnkr : http://plnkr.co/edit/lFYUvcTt1W709vam5Dfv?p=preview
I forked your pinkr
As you can see, I update the childrens in the ng-change
and this function is recursive so all childrens will be checked aswell
$scope.changeValue = function(foo, person) {
for(var i in person.childrens){
person.childrens[i].check = person.check;
$scope.changeValue(foo, person.childrens[i]);
}
};
If a person is checked, the children will be checked. If a child is check, it won't update the parent.
这篇关于将布尔复选框 ng-model 添加到对象 AngularJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!