ng-model not working for radio button in AngularJS
JavascriptAngularjsAngularjs ScopeJavascript Problem Overview
I am new to Angular and I am trying to obtain the value of the radio button that the user has selected using ng-model. But I am not getting any output in "selected contact".
Here is My HTML
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
<table border="0">
<th>Contact Type</th>
<tr ng-repeat="contact in contacttype"><td>
<input type="radio" ng-model="contactname" name="group1" value="{{contact.name}}">{{contact.name}}
</td>
</td></tr></table>
<tt>selected contact = {{contactname}}</tt><br/>
</form>
</body>
</html>
Below is my main.js
function Ctrl($scope) {
$scope.contacttype = [
{name: 'Both' },
{name: 'User'},
{name: 'Admin'}
];
}
What am I doing wrong here? Not able to figure out !!!
Javascript Solutions
Solution 1 - Javascript
Because ng-repeat creates its own scope and what you are trying to do is assign the value to the parent scope from the child scope. So you can do
<input type="radio" ng-model="$parent.contactname" name="group1" value="{{contact.name}}">
Solution 2 - Javascript
So I had this same problem and using $parent with ng-model didn't appear to be working. My problem was that I had groups of checkboxes but used the same name attribute for each of them. It ended up hiding the default checked radio button in the last group.
Make sure you are using distinct name attributes for each distinct group.
Solution 3 - Javascript
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>
<script src="app-controller-r.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>
Solution 4 - Javascript
if you are using the directive multiple times and you are using the for and id with labels ... Make sure to use a reference to the scope's $id
<li ng-repeat='add_type in types'>
<input id="addtester_{{ add_type.k }}_{{ $parent.$id }}" type="radio" ng-model="$parent.addType" ng-value='add_type.k' class="tb-form__input--custom" /
<label for="addtester_{{ add_type.k }}_{{ $parent.$id }}">{{ add_type.v }}</label>
</li>
Otherwise you will have been directives sharing the same inputs and make it possibly appear as if not working.