ng-checked and ng-change radio button not work together - angularjs
This is because you are not using ng-model
:
FORKED PLUNKER
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
<label>
<input type="radio" name="radius"
ng-change="handleRadioClick(selectedRadius)"
ng-model="radius.checked">
{{radius.name}}
</label>
</div>
UPDATE:
I'm sorry that I didn't notice that you wanted to have a default radio button checked, if that is the case then the approach you're taking is incorrect. You must consider the model as non-individual parts in a group of radio buttons but as a whole, they are supposed to be one value instead. You don't have to use ng-repeat
's radio scope variable instead use another ng-model
as the selectedRadius
model. Your input radio needs to have a value, and in this case we'll use ng-value
to determine the current value of the model.
UPDATED PLUNKER [2014 September]
JAVASCRIPT
Controller
$scope.radii = [
{id:.25, name:"1/4 Mile"},
{id:.5, name:"1/2 Mile"},
{id:1, name:"1 Mile"},
{id:2, name:"2 Mile"},
{id:3, name:"3 Mile"},
{id:4, name:"4 Mile"},
{id:5, name:"5 Mile"}
];
// selected value is {id:2, name:"2 Mile"}
$scope.selectedRadius = $scope.radii[3];
HTML
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
<label>
<input type="radio" name="radius"
ng-change="handleRadioClick(radius)"
ng-model="selectedRadius"
ng-value="radius">
{{radius.name}}
</label>
</div>
UPDATED PLUNKER [2015 January]
dcz.switcher's problem below suggested that the solution above does not trigger the ng-change
event handler when a radio button is reselected. The main problem was that the ng-model
was referring to the ng-repeat
's scope and not to the controller's scope from the second change. To solve this problem you can use the $parent
property. An alternative would be to use controllerAs
alias and use the alias itself to access your controller's property. To understand more about scopes in AngularJS, I suggest you read more about it in here.
HTML
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
<label>
<input type="radio" name="radius"
ng-change="handleRadioClick($parent.selectedRadius)"
ng-model="$parent.selectedRadius"
ng-value="radius">
{{radius.name}}
</label>
</div>
Use default values and everything will work like a charm, no need to $watch scope or anything... and Yes you need ng-model
- ng-model - does all work
- ng-checked - makes sure you have CHECKED attribute present
- ng-change - will trigger your function on-Change
HTML example:
<input type="checkbox"
ng-model="row.active"
ng-checked="row.active"
ng-true-value="1"
ng-false-value="0"
ng-change="update(row)"
/>
<!-- test -->
{{ row.active }}
JS optional:
$scope.update = function(row) {
console.log('row.active');
}
This is because ng-change requires ngModel to be present.
Hope this helps. Cheers!