ng-checked 单选按钮在页面加载时未在 AngularJS 中设置 ng-model 值

Question

我正在学习 angularJS 并尝试将 ng-model、ng-checked 和 ng-if 一起用于单选按钮

<html>
<head>
    <title>Angular JS Radio Button Test</title>
</head>
<body ng-app="">
    <input type="radio" name="gender" value="M" ng-model="selectedGender" ng-checked="true"/>M<br />
    <input type="radio" name="gender" value="F" ng-model="selectedGender" />F<br />
    <div ng-if="selectedGender == 'M'">
        Male
    </div>
    <div ng-if="selectedGender == 'F'">
        Female
    </div>

</body>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>    
</html>

现在，在初始页面加载时，"M" 单选按钮被选中，但 <div ng-if="selectedGender == 'M'"> div 仍然没有显示，除非我再次单击它，之后它有效。

导致此问题的原因，以及如何解决。

提前致谢。

Answer 1

您可以在"ng-init"中初始化如下。

<body ng-app="" ng-init="selectedGender = 'M'">
    <input type="radio" name="gender" value="M" ng-model="selectedGender" ng-checked="true"/>M<br />
    <input type="radio" name="gender" value="F" ng-model="selectedGender" />F<br />
    <div ng-if="selectedGender == 'M'">
        Male
    </div>
    <div ng-if="selectedGender == 'F'">
        Female
    </div>

</body>

正在工作的 plunker here。

Answer 2

ng-checked 不设置 ng-model

的值

它只会帮助您根据范围值来选中或取消选中值。通过使用 ng-check 指令，您不需要使用 {{}} 插值，您可以使用范围值在其中形成表达式。

From docs

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

您应该在控制器内的初始加载时设置 ng-model 值

 $scope.selectedGender = 'M'

ng-checked 单选按钮在页面加载时未在 AngularJS 中设置 ng-model 值

ng-checked Radio Button not setting ng-model value in AngularJS on page load

radio-button

angularjs

angular-ng-if

ng-hide

angularjs-ng-checked