0

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

是什么导致了这个问题，以及如何解决。

提前致谢。

4

2 回答 2

2

您可以在“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>

在这里工作的笨蛋。

于 2016-09-22T06:18:20.353 回答
2

ng-checked不设置值ng-model

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

来自文档

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

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

 $scope.selectedGender = 'M'
于 2016-09-22T06:21:39.787 回答