Rhs Rhs - 5 months ago 25
AngularJS Question

AngularJs: Binding ng-model to a list of radio buttons

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?

Answer

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