OnClick radio button show hide div angular js

Question

My code is ,

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

my script is

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

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

michael · Accepted Answer · 2014-01-28 08:37:40Z

13

You are trying to change the view directly from your controller. This is not the angular way. Pull the model state from the view out of the controller. For example:

<div ng-show="color == 'red'">Red Selected</div>
<div ng-show="color == 'green'">Green Selected</div>
<div ng-show="color == 'blue'">Blue Selected</div>

answered Jan 28, 2014 at 8:37

michael

16.4k8 gold badges57 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2014-01-28 08:59:31Z

3

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>

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.

answered Jan 28, 2014 at 8:59

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

OnClick radio button show hide div angular js

2 Answers 2

Comments

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

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

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

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related