current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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.

share|improve this question

2 Answers 2

up vote 1 down vote accepted
  1. Your "include all" checkbox is trying to set .selectionAll property on a String (story in stories gives you a String).
  2. 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.

share|improve this answer
    
hey #hon2a can you help me more..by explain it in example in fiddle or plunkr. –  Abhishek Nov 26 '14 at 12:32
    
Hey #hon2a i have check this and It's working Fine. Thanks for Explanation In Detail. –  Abhishek Nov 26 '14 at 12:46
    
If you consider the answer sufficient, please mark it as accepted. –  hon2a Nov 26 '14 at 12:52
up vote 1 down vote

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);
  }
})
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.