Question

我是棱角分明的新人。我按照以下代码进行简单搜索。

<!DOCTYPE html>
<html ng-app=EmployeeApp>

  <head>
    <script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3" src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="empCtrl">      
    <table>
        <tr>
            <td align="right">Search :</td>
            <td><input ng-model="query[queryBy]" /></td>
        </tr>           
        <tr>
            <td align="right">Search By :</td>
            <td>
                <select ng-model="queryBy">
                    <option value="$"></option>
                    <option value="name">NAME</option>
                    <option value="company">COMPANY</option>
                    <option value="designation">DESIGNATION</option>
                </select>   
            </td>
        </tr>
    </table>
    <hr>
    <div>
        <table>
            <tr>
                <th>Employee Name</th>
                <th>Company Name</th>
                <th>Designation</th>
            </tr>
            <tr ng-repeat="emp in employees | filter:query">
                <td>{{emp.name}}</td>
                <td>{{emp.company}}</td>
                <td>{{emp.designation}}</td>
            </tr>
        </table>
    </div>
  </body>

</html>

到目前为止搜索工作正常但在我开始搜索之前我得到的结果。我想让它显示什么，直到我开始搜索，只有当我开始输入时，我应该得到过滤后的输出。我不需要事先显示整个数据。有没有办法做到这一点？

基本上当搜索框为空时，不应显示任何内容。

Answer 1

您可以通过观察搜索的价值来隐藏数据表。您可以使用Angular的ng-show指令来显示/隐藏您的表格。

ng-show="query[queryBy] !== undefined && query[queryBy] !== ''"

这有效，但它不是最干净的方法。您可以在控制器中编写一个函数，该函数返回一个布尔值来确定搜索是否为空。例如

ng-show="isSearchEmpty()"

http://plnkr.co/edit/5Wux1qbM1mwPNdA1sgiZ?p=preview

这是第一种方法的一个例子。

AngularJs过滤器：在我开始搜索之前不应显示任何内容

1 个答案: