65

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

Shrey Shivam
  • 1,107
  • 1
  • 7
  • 16

4 Answers4

112

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}}">
zs2020
  • 53,766
  • 29
  • 154
  • 219
  • I have a checkbox functionality similar to above (with ng-repeat, values from scope.objects in main.js). {{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 – Shrey Shivam Sep 03 '13 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) ``, so each contact will be assigned a field called `checked` when the box is checked. – zs2020 Sep 03 '13 at 14:56
  • 1
    [Another question on how to do checkboxes in AngularJS](http://stackoverflow.com/questions/14514461/how-can-angularjs-bind-to-list-of-checkbox-values) – Blazemonger Jan 30 '14 at 17:59
  • 1
    Instead of interpolating the name, you can also use `ng-value="contact.name"` as stated in [the docs](https://docs.angularjs.org/api/ng/input/input%5Bradio%5D). 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`. – WebWanderer Sep 07 '16 at 16:15
5

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.

Josh C
  • 7,461
  • 3
  • 24
  • 21
2

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>
sasikaran
  • 142
  • 5
1

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.

dRo
  • 11
  • 2