Change ng-hide value when clicking button

Question

I'm making a small example to change the value of ng-hide after clicking button, but it didn't work.

I've tried:

angular.module('myModule', []).controller('myController', function ($scope) {
  $scope.hide= false
  $scope.change = function () {
    $scope.hide = !$scope.hide  
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myController">
  <p ng-hide="{{hide}}">some text...</p>
  <button ng-click="change()">change</button>
</div>

And my question: what am I missing?

Are you getting any error in browser console? – MicroPyramid Jun 20 '16 at 07:32 — MicroPyramid, Jun 20 '16 at 07:32
are you including js and html code in one file? – Hassan Tariq Jun 20 '16 at 07:33 — Hassan Tariq, Jun 20 '16 at 07:33

score 4 · Accepted Answer · answered Jun 20 '16 at 07:32

4

Remove the brackets around hide in your template.. that will help.

ng-hide="hide"

answered Jun 20 '16 at 07:32

Keugels

790
5
15

2

like this `
some text...
` – The scion Jun 20 '16 at 07:35

score 1 · Answer 2 · answered Jun 20 '16 at 07:34

1

You can use a ternary condition like

$scope.hide = ($scope.hide) ? false : true;

answered Jun 20 '16 at 07:34

albttx

3,444
4
23
42

Thanks! But it's longer than my current statement – Tân Jun 20 '16 at 07:42
What would be the benefit of doing so? – Fabian N. Jun 20 '16 at 07:49

score 1 · Answer 3 · edited May 23 '17 at 10:29

Angular uses {{...}} to mark something as an expression. However hide is already an angular expression so you get expression of expression which breaks the two way binding and is only evaluated once on pageloading...

So to fix your problem simply remove the brackets

ng-hide="hide"

See here for more information.

angular.module('myModule', []).controller('myController', function ($scope) {
  $scope.hide= false
  $scope.change = function () {
    $scope.hide = !$scope.hide
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myController">
  <p ng-hide="hide">some text...</p>
  <button ng-click="change()">change</button>
</div>

Change ng-hide value when clicking button

3 Answers3