ng-hide无法正常工作

Question

我是angularjs的新手。 当我点击“Click Me”时，toggle方法被调用。 test的值从false更改为true，但ng-hide未确认新值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

测试不是表达式，所以除去大括号，

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

Answer 2

及其语法错误。您正在结合表达式绑定和指令绑定。下面的代码应该工作。

替换ng-hide="{{test}}与ng-hide-"test"

Answer 3

的ngHide指令显示或隐藏基于提供给所述ngHide属性表达给定的HTML元素。

既然它接受表达式，所以不需要花括号！

变化：

ng-hide="{{test}}" 

到

ng-hide="test" 

您需要使用大括号如果定向期待string代替expression作为属性值。

详情请参阅Angular Docs。

Answer 4

你不需要告诉你在ng-hide里面编写了一个角码，因为这已经是角度指令了，它本身也会改变test变量，所以不需要在那里提供大括号。

简单的尝试，如：ng-hide="test"

Answer 5

一些代码更改：

• 你忘了关</span>

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

• 从封闭</td>元素删除**strong text**。

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

• 屁股Sajeetharan建议，test不是表达式，所以除去花括号。

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

工作演示：

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>