将带有 ng-model 的复选框添加到 Object AngularJS答案

【问题标题】：Add checkboxes with ng-model to Object AngularJS将带有 ng-model 的复选框添加到 Object AngularJS
【发布时间】：2018-08-03 04:29:00
【问题描述】：

我正在尝试为每个name 添加复选框，然后在名称处添加boolean 到$scope.messages：例如。我选中名称 eva 的复选框 - 然后 $scope.messages 看起来像这样：

$scope.messages = 
    {

    "family": [

        {

            "name": "eva",
            "checked" : true,
            "childrens" : [..

这是我的代码：

JS：

     $scope.messages = 
    {

    "family": [

        {

            "name": "eva",

            "childrens": [

                {

                    "name": "John",

                    "childrens": [

                        {

                            "name": "Jacob"

                        }

                    ]

                }

            ]

        },
        {

            "name": "ben",

            "childrens": [

                {

                    "name": "Eva",

                    "childrens": [

                        {

                            "name": "Jack"

                        }

                    ]

                }

            ]

        }
    ]
}

HTML：

 <div ng-repeat="key in messages">
       <ul ng-repeat=" (x, y) in key" style="list-style:none;">
         <li><input type="checkbox" ng-model="shapes"  ng-change="changeValue(shapes, y.name)"/> {{y.name}}</li>
           <li style="margin-left:15px;" ng-repeat="(a,b) in y.childrens" ><input type="checkbox" ng-model="shapes" ng-change="changeValue(shapes, b.name)"/>  {{b.name}}
       <ul style="margin-left:15px;" ng-repeat="p in b.full_name" >
         <li><input type="checkbox" ng-model="shapes" ng-change="changeValue(shapes, p.name)"/> {{p.name}}</li>
       </ul>
     </li>
  </ul>
  </div>

我还想将boolean 添加到checked 的孩子@name 例如。

 $scope.messages = 
    {

    "family": [

        {

            "name": "eva",
            "checked" : true,
            "childrens": [

                {

                    "name": "John",
                    "checked" : true,
                    "childrens": [

                        {

                            "name": "Jacob",
                            "checked" : true,
                        }

这是我的笨蛋：http://plnkr.co/edit/CbOrL5l4o7a2f9OOjZ2w?p=preview 提前谢谢解答！！！

【问题讨论】：

标签： angularjs checkbox angular-ngmodel

【解决方案1】：

我不确定我是否理解了这个问题或您到底需要什么，但我已经对您的代码进行了一些尝试，现在我可以看到家谱中每个项目的“已检查”布尔值。

检查我的代码，看看这是否是您正在寻找的方向。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

$scope.messages = 
{

"family": [

    {"name": "eva",
    checked: false,
    "childrens":
      [
            {"name": "John",
              checked: false,
                "childrens": [
                    {"name": "Jacob", checked: false}
                ]
            }
        ]
    },
    {"name": "ben",
    checked: false,
    "childrens":
        [
      {"name": "Eva",
        checked: false,
        "childrens": [
          {"name": "Jack", checked: false}
                ]
            }
        ]
    }
]
}
 $scope.changeValue = function(item) {
    console.log(item.name);
    console.log(item.checked);
 };
});

我也稍微调整了 HTML：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="key in messages">
     <ul ng-repeat="person in key" style="list-style:none;">
       <li>
         <input type="checkbox" ng-model="person.checked"  ng-change="changeValue(person)"/> {{person.name}}
       </li>
       <li style="margin-left:15px;" ng-repeat="child in person.childrens" >
         <input type="checkbox" ng-model="child.checked" ng-change="changeValue(child)"/>  {{child.name}}
         <ul style="margin-left:15px;" ng-repeat="grandChild in child.childrens" >
            <li>
              <input type="checkbox" ng-model="grandChild.checked" ng-change="changeValue(grandChild)"/> {{grandChild.name}}
            </li>
          </ul>
       </li>
    </ul>
  </div>
</body>

如果您打开控制台，您将看到您单击的项目的名称和复选框值。 ng-model 最好使用 object 字段。

【讨论】：