AngularJS: radio checkbox model doesn't change

Question

Here is my code:

<div ng-controller="TestController">
    <input ng-change="change()" ng-repeat="item in array" ng-model="selected" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input>
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [ {
            interval: "1"
        }, {
            interval: "3"
        }, {
            interval: "24"
        }];

        $scope.selected = 1

        $scope.change = function () {
            console.log($scope.selected);
        }
    });
</script>

When I click different radio checkbox, the $scope.selected value doesn't change at all, still 1.

But when I change the $scope.selected point to an object:

    $scope.selected = {
        value: 1
    };

and bind the input tag's model to the value property: ng-model="selected.value". It work again.

Why? Why this happened?

Abdullah Rasheed · Accepted Answer · 2016-03-29 12:44:12Z

Scope Issue

It's because ng-repeat creates it's own scope. So selected is now a new property of ng-repeat's scope. If you absolutely needed to you could do this:

<div ng-controller="TestController"> //parent scope
   //ng-repeat create it's own scope here, so you must reference the $parent to get the selected value.
    <input ng-change="change()" ng-repeat="item in array" ng-model="$parent.selected" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input> // 
</div>

Rather than using $parent it would be better to use object.property as you have discovered.

Alternative

Also, another way of doing it would be to add an update method to your controller. Because of Scope Inheritance you could access the parent method in your ng-repeat and update the parent scopes selected property:

//Add to your controller
$scope.updateSelected= function (selected) {
   $scope.selected = selected;
}

//new HTML
<div ng-controller="TestController">
        <input ng-change="updateSelected(selected)" ng-repeat="item in array" ng-model="selected" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input> // 
 </div>

Shaishab Roy · Accepted Answer · 2016-03-29 13:00:49Z

0

In your code for each radio button created separate scope so no affect when select another radio button. so you should use a parent object for each radio button and value set to this parent object property then will affect for every change.

like: in your controller :

$scope.selectedInterval= {value: 1};

and in html:

<input  ng-repeat="item in array" ng-model="selectedInterval.value" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input>

here selectedInterval is parent object and value is property of selectedInterval. That's why no need to call change function.

edited Mar 29, 2016 at 13:00

answered Mar 29, 2016 at 12:49

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Collectives™ on Stack Overflow

AngularJS: radio checkbox model doesn't change

2 Answers 2

Scope Issue

Alternative

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Scope Issue

Alternative

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related