CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Shrey Shivam
Shrey Shivam

Reputation: 1127

ng-model not working for radio button in AngularJS

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 !!!

Upvotes: 66

Views: 44244

Answers (4)

dRo
dRo

Reputation: 21

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.

Upvotes: 2

sasikaran
sasikaran

Reputation: 152

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>

Upvotes: 3

Josh C
Josh C

Reputation: 8411

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.

Upvotes: 6

zs2020
zs2020

Reputation: 54504

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}}">

Upvotes: 113

Related Questions