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元素。

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

更改：

ng-hide="{{test}}"

至

ng-hide="test"

如果指令期望string而不是expression作为属性值，则需要使用大括号。

有关更多信息，请参阅Angular Docs。