ng-checked and ng-change radio button not work together - angularjs
This is because you are not using ng-model
:
<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');}