Радиокнопки Angularjs становятся множественными

Question

Радиокнопки Angularjs становятся множественными

0

Я изучаю угловой и использую переключатель в своей программе. Я нашел проблему, которую я не могу объяснить.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <script src="bower_components/angular/angular.min.js"></script>
  </head>
  <body ng-app = "myApp">
	<div class="container" ng-controller="myController">
		<div><p style="margin: 30px auto"></p></div>
		<label class="radio-inline" ng-repeat = "name in names" for = "{{name}}">
			<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite"></input>
			{{name}}
		</label>

		<p>Your favorite is {{my.favorite}}</p>

		<div>
	    	<select ng-model="choosenone" ng-options="method.value as method.label for method in contactMethods">
	    		<option value="">Tel or Email</option>
	    	</select>
			<p>You choose {{choosenone}}</p>
    	</div>
	</div>

    <script type="text/javascript">
    	angular.module('myApp',[])
    	.controller("myController",['$scope','$log',function ($scope,$log) {
    		//radio choices
    		$scope.names = ['pizza', 'unicorns', 'robots'];
       		$scope.my = { favorite: 'unicorns' };

       		//select chocices
       		$scope.contactMethods = [{value:"tel",label:"Tel."},{value:"email",label:"Email"}];
       		$scope.choosenone;
    	}]);
    </script>
  </body>
</html>

Этот код отлично работает, но если я создам $ scope.my в javascript-коде, равном пустой строке или неопределенному, и сделайте ng-модель в теге с радиовходом HTML равным "my", тогда переключатели могут быть mutiple выбран. Какая причина?

Wayne Li 20 апр. 2016, в 09:15

Источник

0

проверьте этот jsfiddle, ваш код работает нормально jsfiddle.net/p3jg6x24
Akis Tofas 20 апр. 2016, в 09:02

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

проверьте этот jsfiddle, ваш код работает нормально jsfiddle.net/p3jg6x24

rrd · Answer 1 · 2016-04-20T05-53-00.000Z

<label class="radio-inline" ng-repeat="name in names" for="{{name}}">
  <input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite" />
  {{name}}
</label>

Наверное, потому что все они имеют одинаковый идентификатор - это изменение. Так, например id = "{{name}} -$index", и он будет работать так, как вы хотите. Если вы сохраняете одно и то же имя, можно выбрать только один из них.