2017-06-22 84 views
1

您好我正在Angularjs和web html中开发web应用程序。我有两个男性和女性的单选按钮。我想将男性设置为默认选中状态。我尝试了很多方法,但不起作用。最后,我尝试了ng-checked =“True”,它工作。但是当我检查男性时,我得到了未定义的角码。AngularJS单选按钮选定的值不起作用

<label for="male" class="male"> 
           {{ 'Male' | translate }} 
           <span class="input-icon"><img src="images/male-icon.png"></span> 
           <input type="radio" id="male" name="selector" ng-model="Gender" value="M" ng-checked="true"> 
           <span class="selector-male"></span> 
          </label> 
          <label for="female" class="female"> 
           {{ 'Female' | translate }} 
           <span class="input-icon"><img src="images/female-icon.png"></span> 
           <input type="radio" id="female" name="selector" ng-model="Gender" value="F"> 
           <span class="selector-female"></span> 
          </label> 

上面的代码默认选择男性。但问题是,当我选择女性我在女性下面的代码。

Gender: $scope.Gender 

每当我没有选择任何东西(默认情况下男性会被点击)我在性别:$ scope.Gender中未定义。我可以知道我为什么不明确的原因吗?任何帮助,将不胜感激。谢谢

+0

[单选按钮的可能重复NG-检查与NG -model](https://stackoverflow.com/questions/23279296/radio-buttons-ng-checked-with-ng-model) –

回答

0

的问题是:

ng-checked=true将设置复选框只为真,而不是CurrentValue的问题。要解决这个问题,您应该:

ng-checked="Gender" in HTML and $scope.Gender = 'M' in your controller。

如果你不想在一个div中添加控制器anothing,包裹代码:

<div ng-init="Gender='M'"><label></label></div>

Plunkr:https://plnkr.co/edit/i4WK990a8zHyYkoW8pIb?p=preview

+0

此外,我认为你需要使用'ng-value'而不是'value' :在这种情况下,https://docs.angularjs.org/api/ng/input/input%5Bradio%5D –

+0

,值就足够了。如果必须插入动态值,则为ng值。 – gauravmuk

+0

谢谢。没有运气。 –