Angular JS expression not evaluating

Question

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 · Accepted Answer · 2016-11-30 15:23:51Z

2

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.
});

answered Nov 30, 2016 at 15:23

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lewis · Accepted Answer · 2016-11-30 15:22:26Z

1

This is because you havent closed your function

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;
}})

answered Nov 30, 2016 at 15:22

Lewis

2,4932 gold badges24 silver badges30 bronze badges

Comments

Mistalis · Accepted Answer · 2016-11-30 15:24:10Z

1

Your expression is fine, but you have a typo error in your JS file:

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;
    } //MISSING
});

answered Nov 30, 2016 at 15:24

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Comments

Bünyamin Sarıgül · Accepted Answer · 2016-11-30 15:15:50Z

-1

You can try this:

<button ng-if="isHidden" ng-click="showHideColors()" type="button">Show Available Colors</button>

<button ng-if="!isHidden" ng-click="showHideColors()" type="button">Hide Available Colors</button>

answered Nov 30, 2016 at 15:15

Bünyamin Sarıgül

3,0914 gold badges35 silver badges57 bronze badges

Collectives™ on Stack Overflow

Angular JS expression not evaluating

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related