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

test不是表达式，因此请删除大括号

 <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里面写了一个角度代码，因为它已经是angular指令了，它会自己转移test变量，所以不需要提供括号在那边。

只需尝试：ng-hide="test"

Answer 5

一些代码更改：

• 您忘了关闭</span>

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

• 从结束**strong text**元素中删除</td>。

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

• Sajeetharan建议的屁股，test不是表达式，因此请删除大括号。

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

工作演示：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;