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

您可以在＆＃34; ng-init＆＃34; 中进行初始化，如下所示。

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

Answer 2

ng-checked未设置ng-model

的值

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

From docs

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

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

 $scope.selectedGender = 'M'

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

2 个答案: