66

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

4 Answers 4

113

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}}">
4
  • I have a checkbox functionality similar to above (with ng-repeat, values from scope.objects in main.js). <input type="checkbox" ng-model="tierchecked" name="tier_class" ng-checked="item.checked" />{{item.name}} Again I am stuck in getting all the values checked by the user... In short, if we replace radio button above, with checkbox...how should I proceed. Struggling to come to a solution for this too Sep 3, 2013 at 14:37
  • @Shrey For checkbox you need to bind an individual model to each box, this is not like the radio button group since radio button group allows only one to be picked. You can do (suppose you loop through contact in contacts) <input type="checkbox" ng-model="contact.checked" name="tier_class"/>, so each contact will be assigned a field called checked when the box is checked.
    – zs2020
    Sep 3, 2013 at 14:56
  • 1
  • 1
    Instead of interpolating the name, you can also use ng-value="contact.name" as stated in the docs. You don't really need to use ng-value here since you are using strings as your model (as the value attribute will only work for strings), but if you want to use any other data type for your model (boolean, object, ...) you will need to use ng-value. Sep 7, 2016 at 16:15
6

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.

0
3

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>

0
2

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.