How to use checkbox with nested ng-repeat in angularjs

Question

Hello everyone i have faced some problem in case of nested checkbox uses. In my problem i m stuck on to how to use IncludeAll on click checkbox. If checkbox value is true then it's give me a value of that. if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array. and if one of the checkbox is false then IncludeAll checkbox false..But in Case the other checkbox will be selected.

This is my Fiddle Link : http://jsfiddle.net/0x4396pu/1/

Here is my Html Code:

 <form action="#" ng-controller='MyCtrl'>
     <div class="control-group" ng-repeat="story in stories">
     <br>
     <input type="checkbox" ng-model="story.selectionAll">
        <label class="control-label">IncludeAll {{story}}</label>
        <div class="controls">
            <label class="checkbox inline" ng-repeat="browser in browsers">
                <input type="checkbox" value="{{browser}}"  
                   ng-model="selection[story].browsers[browser]"
                   ng-checked="story.selectionAll"> 
               {{browser}}
           </label>
       </div>
    </div>
</div>
<pre>{{selection | json }}</pre>
</form>

Here is my Controller file :

function MyCtrl($scope) {
  $scope.stories = ['1', '2', '3'];
  $scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
  $scope.selection = {};
  angular.forEach($scope.stories, function(story) {
     $scope.selection[story] = {
       browsers: {},
     };
  });
}

Thanks in Advance.

Abhishek · Accepted Answer · 2014-11-28 12:13:14Z

I am answer my own Question. But anyway Here is Answer how to select Checkbox in Nested ng-repeat.i think It's Help you Thanks.

Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview

Here is Html Code:

  <!DOCTYPE html>
  <html ng-app="myApp">
    <head>
       <link rel="stylesheet" href="style.css">
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
        /angular.min.js">
      </script>
     <script src="script.js"></script>
    </head>
<body>
  <form action="#" ng-controller='detailContrller'>
   <div class="control-group" ng-repeat="story in stories"> <br>
      <h4> Enter Data </h4>
             Name :  <input type="text" data-ng-model="selection[story].Name1" 
                        placeholder="Enter Name">  <br>
          Address :  <input type="text" data-ng-model="selection[story].Name2" 
                        placeholder="Enter Address">  <br>
          City :    <input type="text" data-ng-model="selection[story].Name3"
                        placeholder="Enter City">  <br>
          Phone :  <input type="text" data-ng-model="selection[story].Name4" 
                        placeholder="Enter Phone ">  <br>
          State :  <input type="text" data-ng-model="selection[story].Name5" 
                        placeholder="Enter State">  <br>

    <input type="checkbox" ng-model="selection[story].all"
            ng-change="updateAll(story)">
    <label class="control-label">IncludeAll {{story}}</label>
        <div class="controls">
            <label class="checkbox inline" ng-repeat="browser in browsers">
                <input type="checkbox" value="{{browser}}"
                 ng-model="selection[story].browsers[browser]" 
                   ng-change="checkChange(browser)"
                > {{browser}}
                </label>
            </div>
    </div>
      <button type="button" data-ng-click="save()">Save</button>
      <pre>{{selection | json}}</pre>
    </form>
   </body>
</html>

Here is my Controller

var app = angular.module("myApp",[]);

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

$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};

 var checked;
 $scope.updateAll = function (story) {
    checked = $scope.selection[story].all;
    $scope.browsers.forEach(function (browser) {
        $scope.selection[story].browsers[browser] = checked;
    });
 };

 for(var i = 0; i< 3; i++) {
  $scope.stories.push(i+1);
 }
  $scope.checkChange = function (browser) {
    for(var i =0; i< $scope.stories.length; i++){
        if(!$scope.stories[i].selected){
        checked = false
        return false;
        }
     }
  }
    angular.forEach($scope.stories, function(storgy) {
       $scope.selection[storgy] = {
        browsers: {}
      };
    });

  $scope.save = function () {
   console.log($scope.selection);
  }
})

hon2a · Accepted Answer · 2014-11-26 12:40:30Z

Your "include all" checkbox is trying to set .selectionAll property on a String (story in stories gives you a String).
You can't use ng-checked to somehow "work together" with ng-model. If you want your "include all" checkbox to select all subordinate checkboxes and vice versa, you'll need to watch the changes and provide some logic connecting the two things in your controller.

For example, if you want change of the "include all" checkbox value to influence other checkboxes, you'd have to do something like

<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">

and in your controller

$scope.updateAll = function (story) {
    var checked = $scope.selection[story].all;
    $scope.browsers.forEach(function (browser) {
        $scope.selection[story].browsers[browser] = checked;
    });
};

and handle changes of the individual checkboxes in a similar fashion.

hey #hon2a can you help me more..by explain it in example in fiddle or plunkr.
Hey #hon2a i have check this and It's working Fine. Thanks for Explanation In Detail.

Collectives™ on Stack Overflow

How to use checkbox with nested ng-repeat in angularjs

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related