I was trying to use checkbox and bind the checked attribute using ng-checked attribute but its not working where as its working fine with ng-model attribute with checkbox type inputs.
<!-- not working -->
<input type="checkbox" name="checkedBox"
id="checkedBox11"
ng-checked="isChecked">
<!--working-->
<input type="checkbox" name="checkedBox"
id="checkedBox21"
ng-model="isChecked">
I have created a jsbin to demonstrate the same: here
The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radio button to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radio button will be checked otherwise it will be unchecked.
AngularJS ng-checked Directive The ng-checked directive sets the checked attribute of a checkbox or a radiobutton. The checkbox, or radiobutton, will be checked if the expression inside the ng-checked attribute returns true. The ng-checked directive is necessary to be able to shift the value between true and false .
Approach: The approach is to use the ng-checked directive to check the radio button in the DOM. In the first example, a single radio button is checked by the button and In the second example, multiple radio buttons are checked by the button. The ng-model directive is used to bind the radio buttons.
Since you are not connecting the checkbox with a model in the first case, it is not getting changed in angular and hence the value is not changing in the view also.
However,in the second case, you have attached the isChecked to the checkbox, the changes are reflecting.
Update: If you change the default value of isChecked to true, it shows true and the checkbox is also checked on load.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With