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>