Я пытаюсь показать/скрыть некоторый 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 сможет мне помочь?
Ссылка foo.bar не должна содержать фигурные скобки:
<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>
Angular выражения должны находиться внутри привязок фигурных скобок, где в качестве Angular директив не делайте.
См. также Общие сведения о Angular Шаблонах.
Вы не можете использовать {{}} при использовании директив angular для привязки к ng-model, но для привязки не angular атрибутов вам нужно будет использовать {{}}..
Например:
ng-show="my-model"
title = "{{my-model}}"
Попробуйте обернуть выражение с помощью
$scope.$apply(function() {
$scope.foo.bar=true;
})
Так как ng-show является атрибутом angular, я думаю, нам не нужно помещать оценочные цветочные скобки ({{}})..
Для таких атрибутов, как class, нам нужно инкапсулировать переменные с помощью цветовых кронштейнов оценки ({{}}).
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
function controller($scope) {
$scope.data = {
show: true,
hide: false
};
}
</script>
<div ng-controller="controller">
<div ng-show="data.show"> If true the show otherwise hide. </div>
<div ng-hide="!(data.hide)"> If true the show otherwise hide.</div>
</div>
удалите {{}} скобки вокруг foo.bar, потому что выражения angular не могут использоваться в директивах angular.
Подробнее: https://docs.angularjs.org/api/ng/directive/ngShow
Пример
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>
<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
</div>
</body>
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.foo ={};
$scope.foo.bar = true;
}]);
</script>
Если вы хотите показать/скрыть элемент, основанный на статусе одного {{expression}}, вы можете использовать ng-switch:
<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>
Параграф будет отображаться, когда foo.bar является истинным, скрытым, когда false.