Menu
Im trying to bind the selected value in a list of radio buttons to an ng-model
I have:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-controller="testController">
<form>
<div ng-repeat="option in occurrenceOptions">
<input type="radio" name="occurrence" ng-value="option" ng-model="selectedOccurrence" /><label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ selectedOccurrence }}</div>
<!-- This works -->
<input type="radio" ng-model="selected2" ng-value="'1'"> 1
<input type="radio" ng-model="selected2" ng-value="'2'"> 2
<input type="radio" ng-model="selected2" ng-value="'3'"> 3
<div>This selected value is : {{ selected2 }} </div>
</body>
</html>
For my controller:
(function () {
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.occurrenceOptions = [];
$scope.occurrenceOptions.push('previous');
$scope.occurrenceOptions.push('current');
$scope.occurrenceOptions.push('next');
$scope.selected2;
});
}());
In the first section, I tried to ng-repeat all the occurrenceOptions and bind them all to the same model. However, each time I select something the selectedOccurrence value does not change.
See plunkr: https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview
without the ng-repeat and just typing out all the radio buttons, I am able to get this to work. Why is the ng-repeat version not working?
309
The status of the RadioButton i.e. checked or unchecked will be determined on Button click inside the AngularJS Controller. The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Use the ngModel selector to activate it. It accepts a domain model as an optional Input . If you have a one-way binding to ngModel with [] syntax, changing the domain model's value in the component class sets the value in the view.
The tabindex attribute must be placed by default on the container of each radio button, and its value set dynamically according to the state of the radio buttons: If no button is selected: tabindex="0" on the first and last radio button of the group and tabindex="-1" on the other radio buttons.
Yeah, you can use a function.
The reason behind it is not working is, you are using ng-repeat & you are defining ng-model variable in it. The way ng-repeat works is, it create a new child scope(prototypically inherited) on each iteration of collection. So the ng-model which resides in ng-repeat template, belongs that newly created scope. Here ng-model="selectedOccurrence" create selectedOccurrence scope variable on each iteration of ng-repeat.
To overcome such a problem you need to follow dot rule while defining model in AngularJS
Markup
<body ng-controller="testController">
<form>
<div ng-repeat="option in occurrenceOptions track by $index">
<input type="radio" name="occurrences" ng-value="option" ng-model="model.selectedOccurrence" />
<label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>
Code
$scope.model = {}; //defined a model object
$scope.model.selectedOccurrence = 'current'; //and defined property in it
Demo Plunkr
OR Another preferred way would be using controllerAs pattern while declaring controller(use this instead of $scope inside controller).
HTML
<body ng-controller="testController as vm">
<form>
<div ng-repeat="option in vm.occurrenceOptions">
<input type="radio" name="occurrence" ng-value="option" ng-model="vm.selectedOccurrence" /><label>{{ option }}</label>
</div>
</form>
</body>
ControllerAs Demo
175
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
