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

Answer 1

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.

Answer 2

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"

Answer 3

Some code changes :

• You forgot to close the </span>

  <span ng-hide="test">Testing</span>
  

• Remove **strong text** from the closing </td> element.

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

• Ass suggested by Sajeetharan, test is not an expression, so remove the curly braces.

  <td><span ng-hide="test">Testing</span></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>

Answer 4

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

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

Answer 5

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"