我的代码是,
<form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
</form>
<div id="reddiv">Red Selected</div>
<div id="greendiv">Green Selected</div>
<div id="bluediv">Blue Selected</div>
我的脚本是
function Ctrl($scope) {
$scope.color = 'blue';
if ($scope.color == 'blue') {
//blue div show
}
else if($scope.color == 'green') {
//green div show
}
else {
//red div show
}
}
我需要根据单选按钮点击显示,我尝试了上面给出的一段代码,任何想法
答案 0 :(得分:13)
您正尝试直接从控制器更改视图。这不是有角度的方式。从控制器的视图中拉出模型状态。例如:
<div ng-show="color == 'red'">Red Selected</div>
<div ng-show="color == 'green'">Green Selected</div>
<div ng-show="color == 'blue'">Blue Selected</div>
答案 1 :(得分:3)
Angular方式是使用ngShow
/ ngHide
/ ngIf
指令来显示相应的div。考虑这个例子:
app.controller('Ctrl', function($scope) {
$scope.color = 'blue';
$scope.isShown = function(color) {
return color === $scope.color;
};
});
HTML:
<div ng-show="isShown('red')">Red Selected</div>
<div ng-show="isShown('green')">Green Selected</div>
<div ng-show="isShown('blue')">Blue Selected</div>
同样非常重要的是ng-controller="Ctrl"
应该高于你的表格,因为潜水应该在同一范围内。