Question

我正在尝试向每个name添加复选框，然后将boolean添加到$scope.messages，其名称为：ex。我选中名称为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 谢谢您提前回答！

Answer 1

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

签出我的代码，看看这是否是您想要的方向。

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一起使用。

将具有ng-model的复选框添加到Object AngularJS

1 个答案: