mercredi 1 août 2018

Add checkboxes with ng-model to Object AngularJS

I am trying to add checkboxes to every name, and then add a boolean to $scope.messages at the name : ex. I check checkbox at name eva - then $scope.messages looks like that :

$scope.messages = 
    {

    "family": [

        {

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

Here is my code :

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)"/> </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)"/>  
       <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)"/> </li>
       </ul>
     </li>
  </ul>
  </div>

Also i would like to add boolean to children of checked name ex.

 $scope.messages = 
    {

    "family": [

        {

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

                {

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

                        {

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

Here is my plunker : http://plnkr.co/edit/CbOrL5l4o7a2f9OOjZ2w?p=preview Thanks for answers in advance!!!




Aucun commentaire:

Enregistrer un commentaire