CODEWITHSUNDEEP
angularjs
Ali Nouman
Ali Nouman

Reputation: 3414

Simple ng-show isn't working

My simple ng-show isn't working div should be hide when other values are selected.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>



</head>
<body ng-app="">
   <script>
   function Ctrl($scope) {
     $scope.color = 'blue';
     $scope.specialValue = {
       "id": "12345",
       "value": "green"
     };
   }
 </script>
 <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/>
   <tt>color = {{color | json}}</tt><br/>
  </form>
  Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
  <div ng-show="color==blue">some test</div>
</body>
</html>

here is link

Upvotes: 1

Views: 346

Answers (3)

spoter
spoter

Reputation: 1

your ng-show is outside the controller scope and try to use 'body ngApp=""'instead of 'body ng-app=""'

Upvotes: -1

Matheus Lima
Matheus Lima

Reputation: 2143

Your ng-show is outside the scope of your controller.

Do this:

<div ng-controller="Ctrl">
  <form name="myForm">
    <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/>
    <tt>color = {{color | json}}</tt><br/>
  </form>
  <div ng-show="color=='blue'">some test</div>
</div>

Upvotes: 3

crispychicken
crispychicken

Reputation: 2662

You have to write it like this since blue is a string: 

ng-show="color == 'blue'"

Upvotes: 1

Related Questions