Angularjs unable to to bind radio buttons with model inside nested scopes

Question

I have a scenario where I'm unable to bind radio buttons with my model.In my code radio buttons are being created dynamically inside ng-repeat which is inside ng-if.Here is my code

 <div ng-if="Type.Value == 'Gadgets'">
    <div class="form-group radioChkBtn">
        <label class="col-sm-3 control-label">Device Type</label>
        <div class="col-sm-7">
            <div class="radio" ng-repeat="type in Types">
                <input type="radio" ng-model="DeviceType" ng-value="{{type.Value}}"  id="radioDeviceType{{$index}}" name="devicetype"><label for="radioDeviceType{{$index}}"> {{type.Value}}</label>
            </div>

        </div>
    </div>

Value of DeviceType is always undefined.Even when I assign it some value none of the radio buttons is selected.ng-if creates a scope so is ng-repeat. May be it is the nesting of scopes which is causing the problem.Any help would be really appreciated.

If you output {{DeviceType}}, does it have a value? Also, unwrap your `{{type.Value}}` ... you don't need the `{{...}}` when using ng-value, only value. — Tracker1, May 17 '16 at 00:24
As an aside, for input radios, I prefer to use `text` this way you can use `label > input + span` for custom radio glyphs. — Tracker1, May 17 '16 at 00:26

Fizzix · Accepted Answer · 2016-05-17T00:54:02.907

2

Instead, try setting the model on radio select.

Have this in your controller:

$scope.onRadioChange = function(newValue) {
    $scope.DeviceType.value = newValue;
};

And make your HTML similar to this:

<div class="radio" ng-repeat="type in Types">
    <input type="radio" ng-model="DeviceType.value" ng-change="onRadioChange(type.Value)" ng-value="type.Value" id="{{type.Id}}" name="myRadios"><label for="{{type.Id}}"> {{type.Value}}</label>
</div>

So to break it down, we are now triggering the scope function onRadioChange() when the radio button is clicked via ng-change. We are passing the type.value to it, and inside the function making the model of DeviceType.value equal to the value that is passed to it.

In the example below, you can see that I output DeviceType.value on the page once a radio button is clicked and it has the same value as the radio button that is selected. I use DeviceType.value instead of just DeviceType to get around an Angular problem.

WORKING EXAMPLE

edited May 17 '16 at 00:54

answered May 17 '16 at 00:30

Fizzix

23,679
38
110
176

Fizzix the problem with your example is that once you have selected all the radio buttons one by one the change event does not fire any more. – sqlcte May 17 '16 at 00:47
@sqlcte - You're exactly right, nice find. I'll see if I can find a fix now and will get back to you. – Fizzix May 17 '16 at 00:49
@sqlcte - All fixed. Checkout my new comments on the post and the updated example. Simply just changed `DeviceType` to `DeviceType.value` and the model declaration of `DeviceType` is now an object like: `$scope.DeviceType = {value="nothing yet"};` – Fizzix May 17 '16 at 00:55
Thanks fizzix it worked this time but can you explain what could possibly the reason of it not working without a Value property. – sqlcte May 17 '16 at 00:57
[This question](http://stackoverflow.com/questions/13443619/angular-radiobuttons-stop-firing-ng-change-after-each-one-was-clicked) sums it up well. They state "`ngRepeat` creates new scope, so trying to set value sets it on the new scope. The workaround is to reference a property on an object that is on the parent scope--the object lookup happens on the parent scope, and then changing the property works as expected". – Fizzix May 17 '16 at 01:00

sasikaran · Answer 2 · 2016-05-17T03:00:28.853

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) { 
 
 $scope.devices = [{
  nameD: "Device 1"
  }, {
  nameD: "Device 2"
  }, {
  nameD: "Device 3"
  }, {
  nameD: "Device 4"
 }];
 
});

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<ul>
    <li ng-repeat="device in devices">  
 <label>{{device.nameD}} 
        <input type="radio" ng-model="$parent.deviceType" value="{{device.nameD}}" />       
 </label>
    </li>
</ul>
<button>Submit</button>
</form>
{{deviceType}}
 </div>
</body>
</html>

This has no relation to what the OP is asking at all? Your answer is relevant to form validation, when he/she simply asked about a model coming up as `undefined`... — Fizzix, May 17 '16 at 00:42

Angularjs unable to to bind radio buttons with model inside nested scopes

2 Answers2