checkbox Demo

How to use ng-model with ng-check in Master Slave relationship

by gogirl

HTML

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        Click to select or deselect All: <input type="checkbox" ng-model="isAllSelected" ng-click="toggleSelectAll()"> <br/>
       
        <br/>bool1:
        <input type="checkbox" ng-model="isTrue">
        <br/>bool2:
        <input type="checkbox" ng-model="isOK">
        <br/>str3:
        <input type="checkbox" ng-model="toggledText" ng-true-value="Yes" ng-false-value="No">
             <hr/> Debug:
        <br/> <tt>isAllSelected = {{isAllSelected}}</tt>
        <br/> <tt>bool1 = {{isTrue}}</tt>
        <br/> <tt>bool2 = {{isOK}}</tt>
        <br/> <tt>str3 = {{toggledText}}</tt>
        <br/>
          <hr/> 
             <p> a1-a3 not in Controller <p/> 
             Click to select or deselect All: <input type="checkbox" ng-model="master"> <br/>
        <br/>a1:
        <input type="checkbox" ng-checked="master"  ng-model="a1">
        <br/>a2:
        <input type="checkbox" ng-checked="master" ng-model="a2">
        <br/>a3:
        <input type="checkbox" ng-checked="master" ng-model="a3">
        <hr/>
             <hr/> Not in Controller but still works:
        <br/> <tt>master = {{master}}</tt>
   <br/> <tt>a1 = {{a1}}</tt>
        <br/> <tt>a2 = {{a2}}</tt>
        <br/> <tt>a3 = {{a3}}</tt>      
          <hr/>   
     <hr/> 
            <div>
<p>  The ng-check on child checkbox observes the state of daddy checkbox and keeps in sync. Child selction has no effect on daddy.   <p/>                
<p>    We can use ng-model to store the check value in scope<p/>              
        <input type="checkbox" ng-checked="testModel.child_1 && testModel.child_2 && testModel.child_3 && testModel.child_4 && testModel.child_5" ng-model="isChecked"/> Select All<br/>
        <input type="checkbox"   ng-model="testModel.child_1" ng-checked="isChecked"/> First<br/>
<input type="checkbox" ng-model="testModel.child_2" ng-checked="isChecked"/> Second<br/>
        <input type="checkbox"...

JavaScript

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

function MyCtrl($scope) {
    $scope.isChecked = false;
    $scope.testModel = {
    "child_1": false,
    "child_2": false,
    "child_3": false,
    "child_4": false,
    "child_5": false    
  };
    $scope.isAllSelected = false;
    $scope.isTrue = true;
    $scope.toggledText = 'Yes';
   
$scope.toggleSelectAll = function() {
      ($scope.isAllSelected) ? $scope.isTrue = true : $scope.isTrue = false;
      ($scope.isAllSelected) ? $scope.isOK = true : $scope.isOK = false;
      ($scope.isAllSelected) ? $scope.toggledText = "Yes" : $scope.toggledText = "No";
  }
}