Я пытаюсь показать / скрыть некоторые HTML , используя ng-show
и ng-hide
функции , предусмотренные AngularJS .
Согласно документации, соответствующее использование этих функций выглядит следующим образом:
ngHide - {выражение} - если выражение истинно, то элемент отображается или скрывается соответственно. ngShow - {выражение} - если выражение истинно, то элемент отображается или скрывается соответственно.
Это работает для следующего варианта использования:
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
Однако, если мы будем использовать параметр из объекта в качестве выражения, то и ng-hide
и получим ng-show
правильное true
/ false
значение, но значения не рассматриваются как логическое значение, поэтому всегда возвращаем false
:
Источник
<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>
результат
<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>
Это либо ошибка, либо я делаю это неправильно.
Я не могу найти какую-либо относительную информацию о ссылках на параметры объекта в виде выражений, поэтому я надеялся, что кто-нибудь с лучшим пониманием AngularJS сможет мне помочь?
<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>
Вы не можете использовать
{{}}
при использовании угловых директив для связывания с,ng-model
но для связывания неугловых атрибутов вы должны будете использовать{{}}
..Например:
источник
Попробуйте обернуть выражение:
источник
foo.bar = true
должно бытьscope.foo.bar = true
, чтобы изменить значениеfoo.bar
$scope.$apply
Так
ng-show
как это угловой атрибут, я думаю, нам не нужно ставить оценочные скобки ({{}}
) ..Для таких атрибутов, как
class
нам, нужно заключить переменные в скобки для оценки цветов ({{}}
).источник
источник
удалите {{}} фигурные скобки вокруг foo.bar, потому что угловые выражения нельзя использовать в угловых директивах.
Для получения дополнительной информации: https://docs.angularjs.org/api/ng/directive/ngShow
пример
источник
Если вы хотите показать / скрыть элемент на основе состояния одного {{expression}}, вы можете использовать
ng-switch
:Абзац будет отображаться, когда foo.bar равен true, скрыт, когда false.
источник