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

その構文エラー。式バインディングとディレクティブバインディングの両方を結合しています。以下のコードは動作するはずです。

はngHideディレクティブはngHide属性に設けられた式に基づいて与えられたHTML要素を示すか、隠しng-hide-"test"

Answer 3

とng-hide="{{test}}を交換します。

これは中括弧の必要がないので表現を受け入れるので！

変更：

ng-hide="test" 

へ

ng-hide="{{test}}" 

あなたはディレクティブはstring代わりのexpressionを期待していた場合は、属性値として中括弧を使用する必要があります。

詳細はAngular Docsを参照してください。

Answer 4

ng-hideの中に角度のコードを書いているということは、それがすでに角度指示であることを伝える必要はありません。したがって、それ自体は変数testになりますので、そこに中かっこを付ける必要はありません。 ng-hide="test"

Answer 5

いくつかのコードの変更：

は、単によう試みる

• をあなたは閉じ</td>要素から**strong text**を削除</span>

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

• を閉じるのを忘れていました。

  <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>