AngularJs入力無線値

私は、ユーザがmaleまたはfemaleであるかどうかを伝えるためのフォームを用意しています。私のデータベースでは1または0です。どのようにAngularJs input radioでこれを行うことができます。AngularJs入力無線値

は、今のところ私はこれ持っている：

<div class="form-group"> 
    <label class="col-md-2 control-label">Radios</label> 

    <div class="col-md-10"> 
     <div class="radio radio-primary"> 
      <label> 
       <input type="radio" name="male" id="male" ng-model="employeeCtrl.employee.Gender" ng-value="0"><span class="circle"></span><span class="check"></span> 
       Male 
      </label> 
     </div> 
     <div class="radio radio-primary"> 
      <label> 
       <input type="radio" name="optionsRadios" id="optionsRadios4" ng-model="employeeCtrl.employee.Gender" ng-value="1"><span class="circle"></span><span class="check"></span> 
       Female 
      </label> 
     </div> 
    </div> 
</div>

をしかし、これは動作しません。右のラジオボタンも選択されていないため、値は変更されません。

出典

2016-03-28 Jamie

てみチェンジ '名= "optionsRadios" ID = "optionsRadios4"' '名= "男性" ID = "女"'へ –

https://material.angularjs.org/最新/デモ/ラジオボタン – Jois

ありがとうございました – Jamie

コードを実行すると、これが期待どおりです。ラジオボタンには同じ名前を使用し、コントローラごとに異なるIDを使用できます。

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app=""> 
 
    
 
    <div class="form-group"> 
 
    <label class="col-md-2 control-label">Radios</label> 
 

 
     <div class="col-md-10"> 
 
      <div class="radio radio-primary"> 
 
       <label> 
 
        <input type="radio" id='gender_male' name="gender" ng-model="employeeCtrl.employee.Gender" ng-value="0"><span class="circle"></span><span class="check"></span> 
 
        Male 
 
       </label> 
 
      </div> 
 
      <div class="radio radio-primary"> 
 
       <label> 
 
        <input type="radio" id='gender_female' name="gender" ng-model="employeeCtrl.employee.Gender" ng-value="1"><span class="circle"></span><span class="check"></span> 
 
        Female 
 
       </label> 
 
      </div> 
 
     </div> 
 
    Gender: {{employeeCtrl.employee.Gender}} 
 
    </div> 
 

 
    </body> 
 

 
</html>

出典

2016-03-28 11:22:07

答えて

関連する問題