ng-model不适用于AngularJS中的单选button

我是Angular的新手,我试图获得用户使用ng-modelselect的单选button的值。 但是我没有在“选定的联系人”中得到任何输出。

这是我的HTML

<!doctype html> <html ng-app> <head> <script src="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> 

以下是我的main.js

  function Ctrl($scope) { $scope.contacttype = [ {name: 'Both' }, {name: 'User'}, {name: 'Admin'} ]; } 

我在这里做错了什么? 无法弄清楚!

因为ng-repeat创build了自己的作用域,所以你要做的就是把这个值赋给父子作用域。 所以你可以做

 <input type="radio" ng-model="$parent.contactname" name="group1" value="{{contact.name}}"> 

所以我有这个相同的问题,使用$父母ng模型似乎没有工作。 我的问题是,我有一组checkbox,但使用相同的名称属性为他们每个人。 它最终隐藏了最后一个组中默认选中的单选button。

确保您为每个不同的组使用不同的名称属性。

 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> 

如果您多次使用该指令,并且将forid用于标签…请确保使用对作用域$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> 

否则,你将被指令共享相同的input,并使其可能看起来好像不工作。