Rohit Rohit - 3 days ago 5
AngularJS Question

Angular JS expression not evaluating

I have written a simple Angular JS code. I'm a beginner. However, one of my expressions is not getting evaluated. Need help. Please check the code below -



var myAppModule = angular.module('myAppModule', []);

myAppModule.controller('myController', function($scope){
// Hide colors by default
$scope.isHidden = true;

// a function, placed into the scope, which
// can toggle the value of the isHidden variable
$scope.showHideColors = function () {
$scope.isHidden = !$scope.isHidden;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<title>Angular JS</title>
<script src="js/angular.min.js"></script>
<script src="js/myAppModule.js"></script>
<style>
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}
div {
margin: 20px;
padding: 20px;
font-size: 16px;
color:#ffffff;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
#purple {
background-color: purple;
}
#gray {
background-color: gray;
}
#olive {
background-color: olive;
}
</style>
</head>

<body ng-controller="myController">
<h2>AngularJS Socks</h2>
<p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p>

<button ng-click="showHideColors()" type="button">
{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
</button>
<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>
</body>
</html>





The expression -
{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
is not getting evaluated but displaying as is on the button. No clue as to what i missed. Thanks in advance.

Win Win
Answer

The code is missing closing bracket. You can see the working demo here - http://jsfiddle.net/me8j3zyc/

var app = angular.module('myAppModule', []);

app.controller('myController', function($scope) {

  $scope.isHidden = true;

  // a function, placed into the scope, which
  // can toggle the value of the isHidden variable
  $scope.showHideColors = function() {
    $scope.isHidden = !$scope.isHidden;
  } // <- This is missing.
});
Comments