Question

我正在尝试隐藏DOM元素，直到输入字段中包含任何值。如何使用ng-cloak实现此目的？

<div>
  <input data-ng-model="search.$" placeholder="Search" type="text" id='search-bar' />
</div>

<div class="single_review text_centered">
  This only displays if the #search-bar has an input value.
</div>

Answer 1

我相信您正在寻找ng-show：

示例：

<div class="single_review text_centered" ng-show="search.$.length">

演示：http://plnkr.co/edit/xDmsDOQC8R0qXHgl9VWl?p=preview

请注意，如果您只使用ng-show="search.$"代替ng-show="search.$.length"，则如果您输入“f”或“false”，div将不会显示，因为它们被认为是假的。

替代方法是ng-if，但实际上div将从DOM中插入/删除而不是仅显示/隐藏。

Answer 2

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

这不是你想要做的。如果您使用的是Angular 1.2+（我相信），您可以这样做

<div class="single_review text_centered" ng-if="search.$.length">
   This only displays if the #search-bar has an input value.
</div>

否则，你可以这样做：

<div class="single_review text_centered" ng-show="search.$.length">
   This only displays if the #search-bar has an input value.
</div>

Answer 3

只是另一种方式（更详细的^^，但根据@tasseKATT的说明可以更安全）：

app.directive("myCloack", function() {
            return {
                link:function(scope,el){
                    el.css('display','none')
                    scope.$watch('search.$',function(newValue){
                        if(newValue){
                            el.css('display','block')
                        }
                    });
                }
            }
        });

玩耍

<div>
    <input data-ng-model="search.$" placeholder="Search" type="text" id='search-bar' ng-init="mysearch=false" ng-change="mysearch=true" />
</div>
<div class="single_review text_centered" ng-show="mysearch" >
    This only displays if the #search-bar has an input value.
</div>

如何使用AngularJS隐藏DOM元素，直到输入有值

3 个答案: