model添加到对象AngularJS

model添加到对象AngularJS

本文介绍了将布尔复选框ng-model添加到对象AngularJS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试做树状复选框之类的事情。
我想为已检查名称的子项添加布尔值:ex。点击名称后的复选框 eva - 她的所有孩子也将被检查。
喜欢:

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,
                        }

我的代码:

<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>

这是我的plnkr:

Here is my plnkr : http://plnkr.co/edit/lFYUvcTt1W709vam5Dfv?p=preview

推荐答案

我分了你的

正如你所看到的,我在 ng-change 中更新了这个孩子,这个函数是递归的,所以所有的孩子都会被检查

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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 13:46