2016-04-20 20 views
0

自分のプログラムで角度を学習してラジオボタンを使用しています。私はそれを説明できないという問題を発見した。Angularjsラジオボタンが複数選択されている

<!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"> 
 
\t <div class="container" ng-controller="myController"> 
 
\t \t <div><p style="margin: 30px auto"></p></div> 
 
\t \t <label class="radio-inline" ng-repeat = "name in names" for = "{{name}}"> 
 
\t \t \t <input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite"></input> 
 
\t \t \t {{name}} 
 
\t \t </label> 
 

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

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

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

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

このコードは正常に動作しますが、私は空の文字列と等しいか、未定義のJavaScriptコードで$ scope.myを加えた場合、無線入力HTMLタグにNG-モデルを作ります「my」に等しい場合、ラジオボタンを複数選択することができます。どういう理由ですか?

+0

このjsfiddleをチェックすると、コードが正常に動作するように見えます。http://jsfiddle.net/p3jg6x24/ – Akis

答えて

0
<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を持つためです。例えばid = "{{name}} - $ index"のように、あなたが望むように動作します。同じ名前を使用する場合は、そのうちの1つだけを選択できます。

関連する問題