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>
如果您多次使用该指令,并且将for
和id
用于标签…请确保使用对作用域$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,并使其可能看起来好像不工作。