仅在提供输入时显示过滤结果 - AngularJS

Question

我有一个输入会过滤掉用户列表。

<!-- Input -->
<input type="text" ng-model="search">


<div ng-repeat="obj in data | filter:search" ng-show="search.$touched" >

    <div class="row">

        <!-- Country -->
        <div class="col-xs-4 text-center" >
            <p>[[obj.country]]</p>
            <img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px">
        </div>

        <!-- Main Info -->
        <div class="col-xs-4" >
            <p class="company-name">[[obj.user.username]]</p>
            <p>[[obj.obj.phone_public]]</p>
            <p>[[obj.user.email]]</p>
            <a href="[[obj.obj.url]]">[[obj.obj.url]]</a></span> <span class="col span_2_of_6">
        </div>

        <!-- Logo -->
        <div class="col-xs-4 pull-right" >
            <img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px">
        </div>

    </div>

    <br><hr>


</div>

过滤器功能运行良好，但我首先尝试隐藏它，并且仅在输入被修改时显示它。

在添加ng-show="search.$touched"

之前

添加ng-show="search.$touched"

后

我应该使用不同的指令吗？

现在什么都没有显示......

Answer 1

关键部分是：ng-show="search"将检查是否存在任何搜索字符

<!-- Input -->
<input type="text" ng-model="search">


<div ng-repeat="obj in data | filter:search" ng-show="search" >

    <div class="row">

        <!-- Country -->
        <div class="col-xs-4 text-center" >
            <p>[[obj.country]]</p>
            <img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px">
        </div>

        <!-- Main Info -->
        <div class="col-xs-4" >
            <p class="company-name">[[obj.user.username]]</p>
            <p>[[obj.obj.phone_public]]</p>
            <p>[[obj.user.email]]</p>
            <a href="[[obj.obj.url]]">[[obj.obj.url]]</a></span> <span class="col span_2_of_6">
        </div>

        <!-- Logo -->
        <div class="col-xs-4 pull-right" >
            <img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px">
        </div>

    </div>

    <br><hr>


</div>