【问题标题】:Add boolean checkboxes ng-model to object AngularJS将布尔复选框 ng-model 添加到对象 AngularJS
【发布时间】:2019-01-09 22:35:49
【问题描述】:

我正在尝试做类似树复选框的事情。 我想为检查名称的孩子添加布尔值:例如。单击name 的复选框后:eva - 她的所有孩子也将被检查。 像这样:

$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:http://plnkr.co/edit/lFYUvcTt1W709vam5Dfv?p=preview

【问题讨论】:

    标签: javascript angularjs checkbox angular-ngmodel


    【解决方案1】:

    我分叉了你的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]);
        }
    };
    

    如果一个人被检查,孩子将被检查。如果孩子被检查,它不会更新父母。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-05-22
    • 2016-02-25
    • 1970-01-01
    • 2016-04-26
    • 1970-01-01
    • 2013-01-27
    • 2014-07-12
    相关资源
    最近更新 更多