javascript - AngularJS 单选按钮选定的值不起作用

Question

您好，我正在使用 Angularjs 和 Web html 开发 Web 应用程序。我有两个用于男性和女性的单选按钮。我想将男性设置为默认选中。我尝试了很多方法但不起作用。最后我尝试使用 ng-checked="True"并且它有效。但是当我检查male时，我在 Angular 代码中未定义。

<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。我可以知道我未定义的原因吗？任何帮助，将不胜感激。谢谢

Answer 1

问题是:

ng-checked=true只会将复选框设置为 true，而不是将当前值设置为 true。要修复，您应该:

ng-checked="Gender" HTML 和 $scope.Gender = 'M'在你的 Controller 中。

如果您不想在 Controller 中添加任何内容，请将代码包装在 div 中:

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

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