In HTML, we knew
that chcekbox is the control that which allows us to select multiple options.
based on the selection, the value of the checkbox results in Boolean format
either true if checked or false if not.
“checked” is the attribute which is used to check the checkbox(which can also used for radio button too).
If we provide the “checked” attribute as true, Then the state of the checkbox is checked, thing to note is even we provide the checked attribute value as false it behaves as like true itself.
<input type="checkbox" checked="true" >Architect<br> à Results as checked
“checked” is the attribute which is used to check the checkbox(which can also used for radio button too).
If we provide the “checked” attribute as true, Then the state of the checkbox is checked, thing to note is even we provide the checked attribute value as false it behaves as like true itself.
<input type="checkbox" checked="true" >Architect<br> à Results as checked
<input
type="checkbox" checked="false" >Developer<br> à Results as checked
even false
Dealing the
selection in angular :
Angular provided us
the powerful directive named “ng-checked” which is used to set the behavior of
the checkbox’s checked attribute.
<input
type="checkbox" ng-checked="true" >Architect<br> à Results as checked
<input
type="checkbox" ng-checked="false" >Developer<br>à Results as unchecked
Fetching the
checkbox selection result :
To get the Boolean
result of the checkbox just simply we can provide the ng-model directive to the
type checkbox control, It holds the value with true or false format as like
below :
Select all <input
type="checkbox" ng-model="chkall" /> <span>{{chkall}}</span>
Result :
Calling a function
on selection of checkbox :
Situations may raise
like needs to call a function on the selection of the checkbox. For dealing
this kind of things we can use the ng-change directive in the checkbox markup
like below :
Select all <input type="checkbox" ng-model="chkall" ng-change="Callfunc()" />
Select all <input type="checkbox" ng-model="chkall" ng-change="Callfunc()" />
In the above we can
find the ng-model as “chkall” which can be used in controller too like
$scope.chkall and perform the required operations.
Ng-change is the
another directive where I used to call a function named “Callfunc()”.This
directive leads to call the function whenever user checks or unchecks the
checkbox.
Example :
JS code :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.Callfunc = function () {
alert($scope.chkall);
}
}
}]);
</script>
Mark up Code :
<body ng-app="myapp" ng-controller="ctrlr">
Select all <input type="checkbox" ng-model="chkall" ng-change="Callfunc()" />
</body>
<body ng-app="myapp" ng-controller="ctrlr">
Select all <input type="checkbox" ng-model="chkall" ng-change="Callfunc()" />
</body>
Result :
Check/uncheck child
checkboxes on selection of master checkbox :
This was the another
frequent functionality most developers face while working over set of records
in table or any else.
Master checkbox
:
<input
type="checkbox" ng-model="chkall" />
The above was the
checkbox where included the ng-model directive with “chkall” model.
Whenever user checks
ng-model value becomes “true”.
Whenever user
unchecks ng-model value becomes “false”.
Child checkboxes :
<input
type="checkbox" ng-checked="chkall" >Architect<br>
<input
type="checkbox" ng-checked="chkall" >Developer<br>
<input
type="checkbox" ng-checked="chkall" >Tester<br />
<input
type="checkbox" ng-checked="chkall" >Sales<br />
In the above all
child checkboxes I used ng-checked directive with the model value of “chkall”,
as soon as the model in the master checkbox changes it reflects the same into
child checkboxes too.
Whole view together
:
<body ng-app="myapp" ng-controller="ctrlr">
<body ng-app="myapp" ng-controller="ctrlr">
Select all departments : <input type="checkbox" ng-model="chkall" /><br />
<input
type="checkbox" ng-checked="chkall" >Architect<br>
<input
type="checkbox" ng-checked="chkall" >Developer<br>
<input
type="checkbox" ng-checked="chkall" >Tester<br />
<input
type="checkbox" ng-checked="chkall" >Sales<br />
</body>
Result :
No comments:
Post a Comment