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

【问题标题】：ng-checked Radio Button not setting ng-model value in AngularJS on page loadng-checked 单选按钮未在页面加载时在 AngularJS 中设置 ng-model 值
【发布时间】：2016-09-22 06:13:46
【问题描述】：

我正在学习 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 仍然不显示，除非我再次单击它，然后它才能工作。

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

提前致谢。

【问题讨论】：

标签： angularjs radio-button angular-ng-if ng-hide angularjs-ng-checked

【解决方案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>

工作的笨蛋here.

【讨论】：

仅供参考，在添加 ng-init 之后，我不需要使用 ng-checked 指令。
是的……，真的。谢谢……@AyushGupta

【解决方案2】：

ng-checked 不设置ng-model 的值

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

From docs

注意此指令不应与 ngModel 一起使用，因为这可能会导致意外行为。

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

 $scope.selectedGender = 'M'

【讨论】：

什么意思？没有意义。
我的意思是 ng-checked 没有设置 ng-model 的角度“功能”有点“错误”。
不，一点也不..它按预期工作..除非您没有设置ng-model的值，否则它不应该改变它的视图..我会说不要使用ng-checked它会导致混乱。