AngularJS: ng-show / ng-hide not working with `{{

2019-01-01 12:39发布

站内问答 / 后端开发
1417 7 6

I am trying to show / hide some HTML using the ng-show and ng-hide functions provided by AngularJS.

According to the documentation, the respective usage for these functions are as follows:

ngHide – {expression} - If the expression truthy then the element is shown or hidden respectively. ngShow – {expression} - If the expression is truthy then the element is shown or hidden respectively.

This works for the following usecase:

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

However, should we use a parameter from an object as the expression then the ng-hide and ng-show are given the correct true/false value but the values are not treated as a boolean so always return false:

Source

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

Result

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

This is either a bug or I am not doing this correctly.

I cannot find any relative information on referencing object parameters as expressions so I was hoping anyone with a better understanding of AngularJS might be able to help me out?

7条回答
回忆，回不去的记忆
2楼-- · 2019-01-01 13:12

remove {{}} braces around foo.bar because angular expressions cannot be used in angular directives.

For More: https://docs.angularjs.org/api/ng/directive/ngShow

example

  <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>
查看更多
0人赞 添加讨论(0) 举报
呛了眼睛熬了心
3楼-- · 2019-01-01 13:18

The foo.bar reference should not contain the braces:

<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 expressions need to be within the curly-brace bindings, where as Angular directives do not.

See also Understanding Angular Templates.

查看更多
0人赞 添加讨论(0) 举报
看风景的人
4楼-- · 2019-01-01 13:18

Since ng-show is an angular attribute i think, we don't need to put the evaluation flower brackets ({{}})..

For attributes like class we need to encapsulate the variables with evaluation flower brackets ({{}}).

查看更多
0人赞 添加讨论(0) 举报
无色无味的生活
5楼-- · 2019-01-01 13:21

You can't use {{}} when using angular directives for binding with ng-model but for binding non-angular attributes you would have to use {{}}..

Eg: 

ng-show="my-model"
title = "{{my-model}}"
查看更多
0人赞 添加讨论(0) 举报
梦醉为红颜
6楼-- · 2019-01-01 13:24

Try wrapping expression with: 

$scope.$apply(function() {
   $scope.foo.bar=true;
})
查看更多
0人赞 添加讨论(0) 举报
不流泪的眼
7楼-- · 2019-01-01 13:32 
<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>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)