var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.test = 'NO';
$scope.test2 = 'NOO';
$scope.testNo = 'no';
$scope.testYes = 'yes';
$scope.testOn = 'on';
$scope.testOff = 'off';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
<style>
.success{
background: #0F0;
}
.error{
background: #F00;
}
</style>
</head>
<body ng-controller="MainCtrl">
<h1>O_o" ng-show</h1>
1. if scope is string 'NOO':
<span class='success' ng-show="test2">{{ test2 }}</span>
<br>
<br>
2. if scope is string 'NO':
<span class='success' ng-show="test">{{ test }}</span>
<span class='error' ng-show="!test">!test</span>
<br>
------------------------------------^ for now this value is not show ?!
<br>
<br>
3. try $scope.test is true/false ?
<span ng-class = "test ? 'success' : 'error'">
{{ test ? 'true' : 'false' }}
</span>
<br>
<br>
4. Solution:
<pre>
ng-show="test ? true : false"
</pre>
sample:
<span class='success' ng-show="test ? true : false">{{ test }}</span>
<br>
<br>
<hr>
<h2>more test:</h2>
test No:
<div ng-show='testNo' class='success'>scope value = 'NO' ng-show</div>
<div ng-hide='testNo' class='error'>scope value = 'NO' ng-hide</div>
test Yes:
<div ng-show='testYes' class='success'>scope value = 'YES' ng-show</div>
<div ng-hide='testYes' class='error'>scope value = 'YES' ng-hide</div>
test On:
<div ng-show='testOn' class='success'>scope value = 'ON' ng-show</div>
<div ng-hide='testOn' class='error'>scope value = 'ON' ng-hide</div>
test Off:
<div ng-show='testOff' class='success'>scope value = 'Off' ng-show</div>
<div ng-hide='testOff' class='error'>scope value = 'Off' ng-hide</div>
</body>
</html>
/* Put your css in here */