Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-checked not working angular for checkbox

Tags:

angularjs

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

like image 394
guleria Avatar asked Dec 15 '14 12:12

guleria


People also ask

How to check if checkbox is checked in angular?

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.

How to make checkbox checked in angular?

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 .

How to check radio button in AngularJS?

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.


1 Answers

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.

like image 94
TheRodeo Avatar answered Oct 02 '22 01:10

TheRodeo