NG-检查单选按钮不AngularJS在页面加载

我学习angularJS设置NG-模型值，并尝试使用ng-model，ng-checked和ng-if一起单选按钮现在NG-检查单选按钮不AngularJS在页面加载

<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，除非我再次单击它，之后才能正常工作。

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

在此先感谢。

来源

2016-09-22 Ayush Gupta

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

Working plunker here。

来源

2016-09-22 06:18:20

只是一个供参考，里面的INTIAL负荷NG-模型值指示。 –

是的..，真的。谢谢.. @AyushGupta –

ng-checked不设置的ng-model

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

From docs

注意，这条指令不应该连同ngModel使用，因为这可能会导致意外的行为。

你应该补充说，'NG-init`，我并不需要使用'NG-checked`后设置控制器

$scope.selectedGender = 'M'

来源

2016-09-22 06:21:39

我看到......虽然没有意义... –

你是什么意思？没有意义。 –

我的意思是'ng-checked'的角度“特征”不是设置'ng-model'有点“buggy”。 –

NG-检查单选按钮不AngularJS在页面加载

回答

相关问题