angularjs – OnClick单选按钮show hide div angular js
发布时间:2020-12-17 08:21:12 所属栏目:安全 来源:网络整理
导读:我的代码是, 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/ /fo
我的代码是,
<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 } } 我需要根据单选按钮点击显示,我尝试了上面给出的一段代码,任何想法
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> 演示:http://plnkr.co/edit/yU6Oj36u9xSJdLwKJLTZ?p=preview 同样非常重要的是ng-controller =“Ctrl”应该移动到你的表格之上,因为潜水应该在同一范围内. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |