I have the following radio button:
<input type="radio" ng-value="option.text" ng-model="selected.value" name="option" ng-checked="poll_post.poll_option_id == option.id">
I have double checked poll_post.poll_option_id
and option.id
are equal. So the expression inside ng-checked is evaluated to true. But in the view, the option is not checked. What am I doing wrong?
you shouldn't use ngModel and ngChecked together.
ngChecked is a one-way binding, that is it will only check the value of the expression and set the input accordingly but if you change the value of the input it won't pass the value to the variable it's bound to.
On the other hand, ngModel will both check the value of the variable it's bound to and will set the value of the variable should the input change.
The advantage of ngChecked over ngModel is that you can use an expression instead of a variable.
Still, if both are present ngModel "wins" over ngChecked (ngChecked has priority 100 while ngModel has priority 1, search "priority" here: https://docs.angularjs.org/api/ng/service/$compile ) and the change of the ngChecked expression won't get passed to the variable ngModel is bound to
You can see in this Plunker that even though Val1
has checked="true"
the variable $scope.selected
is set to Val2
so ng-model wins over ng-checked http://plnkr.co/edit/nae3b46KNzFKVTqEQPG3?p=preview
If you want to programmatically change the status of the checkbox You should edit the variable you have bound your ng-model to, or remove ng-model and leave just ng-checked (that depends on what you are doing).
For more info:
AngularJS: ng-model not binding to ng-checked for checkboxes
https://docs.angularjs.org/api/ng/directive/ngChecked