ng-hide is not working

Question

I am new to angularjs. When I click on "Click Me" the toggle method is called. The value of test changes from false to true, but ng-hide is not acknowledging the new value of test.

<div ng-app="myApp" ng-controller="myCtrl">
<table>
 <tr>
  <td><span ng-hide="{{test}}">Testing</**strong text**td>
  <td><span>hello</span></td>
 </tr>
 <tr>
  <td style="cursor:pointer"><span ng-click="toggle()">Click Me</td>
  <td><span>hello</span></td>
 </tr>
</table>
</div>

script.js

var appX = angular.module('myApp', []);
appX.controller('myCtrl', function($scope){
   $scope.test = false;
   $scope.toggle = function(){
     $scope.test = true;
     console.log("toggle is working");
   };
});

You don't need to provide braces there Try like this `ng-hide="test"` — Jigar7521, Dec 29 '16 at 04:46
Yes that is what i have provided answer below with more brief :) — Jigar7521, Dec 29 '16 at 05:00

score 3 · Answer 1 · answered Dec 29 '16 at 04:47

3

test is not an expression, so remove the curly braces,

 <td><span ng-hide="test">Testing</**strong text**td>

answered Dec 29 '16 at 04:47

Sajeetharan

216,225
63
350
396

score 1 · Answer 2 · answered Dec 29 '16 at 04:47

1

Its a syntax error. You are combining both expression binding and directive binding. Below code should work.

Replace ng-hide="{{test}} with ng-hide-"test"

answered Dec 29 '16 at 04:47

Santosh

3,477
5
37
75

MrNobody007 · Answer 3 · 2016-12-29T04:55:04.220

0

The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute.

Since it accepts expression so no need of curly braces!

Change:

ng-hide="{{test}}"

to

ng-hide="test"

You need to use curly braces if the directive was expecting string instead of expression as an attribute value.

Fore more info refer Angular Docs.

edited Dec 29 '16 at 04:55

answered Dec 29 '16 at 04:48

MrNobody007

1,827
11
32

score 0 · Answer 4 · answered Dec 29 '16 at 04:49

0

You don't need to tell that you are writing a angular code inside ng-hide as that is already angular directive, it will ditect test variable itself, so don't need to provide a braces over there to.

Simply try like : ng-hide="test"

answered Dec 29 '16 at 04:49

Jigar7521

1,549
14
27

score 0 · Answer 5 · edited May 23 '17 at 12:33

Some code changes :

You forgot to close the 
```
Testing
```
Remove **strong text** from the closing </td> element.
```
<td>Testing</td>
```
Ass suggested by Sajeetharan, test is not an expression, so remove the curly braces.
```
<td>Testing</td>
```

Working demo :

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

myApp.controller('MyCtrl', function($scope) {
    $scope.test = false;
   $scope.toggle = function(){
     $scope.test = true;
     console.log("toggle is working");
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
 <tr>
 <td><span ng-hide="test">Testing</span></td>
  <td><span>hello</span></td>
 </tr>
 <tr>
 <td style="cursor:pointer"><span ng-click="toggle()">Click Me</span></td>
  <td><span>hello</span></td>
 </tr>
</table>
</div>

ng-hide is not working

5 Answers5