AngularJs過濾器：直到我開始搜索時纔會顯示任何內容

我是新來的角。我遵循以下代碼進行簡單搜索。AngularJs過濾器：直到我開始搜索時纔會顯示任何內容

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

    <head> 
    <script data-require="[email protected]" 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>

到目前爲止，搜索工作正常，但在我開始搜索之前，我正在得到結果。我希望它不顯示任何東西，直到我開始搜索，只有當我開始輸入時，我應該得到過濾的輸出。我不需要預先顯示整個數據。有沒有辦法做到這一點？

基本上，當搜索框爲空時，不應顯示任何內容。

來源

2016-11-01 free_style

您可以通過查看您的搜索值來隱藏數據表。您可以使用Angular的ng-show指令來顯示/隱藏您的表格。

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

這有效，但它不是最乾淨的方法。你可以在控制器中寫一個返回布爾值的函數來確定搜索是否爲空。例如

ng-show="isSearchEmpty()"

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

這裏的第一個方法的一個例子。

來源

2016-11-01 13:18:32 Ankh

謝謝......我不知道爲什麼我沒有想到.. :) –

嘿@Ankh當搜索沒有返回任何內容時（當沒有匹配時，我可以做什麼來打印「無結果」）？ –

@jimmyjose這樣做會做到這一點，http://stackoverflow.com/a/38236909/2043204 – Ankh

AngularJs過濾器：直到我開始搜索時纔會顯示任何內容

回答

相關問題