Human Love Human Love - 4 months ago 5
AngularJS Question

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

Answer

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>