2016-03-28 71 views
0

我有一个表格,用户必须说如果他是malefemale。在我的数据库中,它是一个10。我怎么能这样做与AngularJs input radioAngularJs输入电台值

现在我有这样的:

<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> 

但是,这是行不通的。没有选择右边的单选按钮也不会改变该值。

+0

尝试改变'NAME = “optionsRadios” ID = “optionsRadios4”''到NAME = “男性” ID = “女”' –

+0

https://material.angularjs.org/最新/演示/ radioButton – Jois

+0

谢谢你的工作 – Jamie

回答

1

运行代码,看看这是你所期望的。 对单选按钮使用相同的名称,并且可以为每个控制器使用不同的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>