的OnClick单选按钮，显示隐藏的div角的js [英] OnClick radio button show hide div angular js

问题描述

我的code是，

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

我需要显示基于单选按钮的点击，我试用了一段code以上我给出任何想法

i need to show based on radio button click , I tried a piece of code above i given , any idea

推荐答案

角的方法是使用 ngShow / ngHide / ngIf 指令来显示相应的div。考虑这个例子：

Angular way would be to use ngShow/ngHide/ngIf directives to show corresponding div. Consider this example:

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-控制器=CTRL应走高，那么你的形式，因为潜水应在同一范围。

Demo: http://plnkr.co/edit/yU6Oj36u9xSJdLwKJLTZ?p=preview

Also very important that ng-controller="Ctrl" should be moved higher then your form, because dives should be in the same scope.

这篇关于的OnClick单选按钮，显示隐藏的div角的js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！