Question

我正在尝试做类似树形复选框的事情。我想将布尔值添加到选中名称的子级：ex。在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

Answer 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]);
    }
};

如果选中了某个人，则将对孩子进行检查。如果孩子被选中，它将不会更新父母。

将布尔复选框ng-model添加到对象AngularJS

1 个答案: