AngularJS:ng-show/ng-hide不使用`{{}}`插值

Question

我试图使用AngularJS提供的ng-show和ng-hide函数显示/隐藏一些HTML .

根据文档,这些功能的用途如下:

ngHide - {expression} - 如果表达式为truthy,则元素分别显示或隐藏.ngShow - {expression} - 如果表达式是真实的,那么元素将分别显示或隐藏.

这适用于以下用例:

<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有更好理解的人都可以帮助我吗？

Answer 1

该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 指令则不需要.

另请参阅了解角度模板.

Answer 2

{{}}使用angular指令进行绑定时不能使用,ng-model但对于绑定非角度属性,则必须使用{{}}..

例如:

ng-show="my-model"
title = "{{my-model}}"

Answer 3

尝试用以下方法包装表

$scope.$apply(function() {
   $scope.foo.bar=true;
})

Answer 4

既然ng-show是我想的一个角度属性,我们不需要把评估花括号({{}})..

对于像class我们需要使用评估花括号({{}})封装变量的属性.

Answer 5

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