CODEWITHSUNDEEP
angularjs
Steve Bals
Steve Bals

Reputation: 1979

OnClick radio button show hide div angular js

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

Upvotes: 7

Views: 21205

Answers (2)

dfsq
dfsq

Reputation: 193261

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.

Upvotes: 3

michael
michael

Reputation: 16341

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>

Upvotes: 13

Related Questions