OnClick radio button show hide div angular js

angularjs

Solution

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.

Problem

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

Original source