Нг-скрыть не работает

Question

Я новичок в angularjs. Когда я нажимаю "Click Me", toggle метод называется. Значение test меняется с ложного на истинное, но 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

Вам не нужно говорить, что вы пишете угловой код внутри ng-hide поскольку это уже угловая директива, она будет изменяться test сама переменная, так что не нужно указывать там скобки.

Просто попробуйте как: ng-hide="test"

Answer 4

Директива ngHide показывает или скрывает данный элемент HTML на основе выражения, предоставленного атрибуту ngHide.

Так как он принимает выражение, поэтому нет необходимости в фигурных скобках!

Изменить:

ng-hide="{{test}}"

в

ng-hide="test"

Вы должны использовать фигурные скобки, если директива ожидала string вместо expression в качестве значения атрибута.

Для получения дополнительной информации см. Angular Docs.

Answer 5

Some code changes:

• Вы забыли закрыть </span>

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

• Удалить **strong text** from the closing </td> элемент.

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