2015-10-13 164 views
0

我有一個table帶有一個搜索欄,它可以過濾和顯示它可以匹配的行。這工作正常,但我想實現,如果。過濾表:「找不到搜索結果」

如果您決定搜索的內容沒有搜索結果,該怎麼辦?因爲它站在table將只顯示什麼。我需要的是顯示一些文字,例如「找不到搜索結果」。理想情況下,這將是一個完美的解決方案,而不是一個警告框或類似的東西。

任何想法?下面有一個plnkr。

<input type="text" class="form-control" ng-model="query[queryBy]" style="width: 400px;" placeholder="Search" /> 

http://plnkr.co/edit/KFLbbz0k7ZBcETSvo3L9?p=preview

回答

2

更改你像這樣的代碼

<tr class="tt" ng-class="{even: $even, odd: $odd}" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty as displayTable"> 

       <td class="shrink"><b>{{x.a}}</b></td> 
       <td class="shrink">{{x.b}}</td> 
       <td class="shrink"><u>{{x.c}}</u></td> 
       <td class="shrink">{{x.d}}</td> 
       <td class="shrink">{{x.e}}</td> 
       <td class="shrink">{{x.f}}</td> 
       <p ng-if="!displayTable.length">no vals with this filter</p> 

      </tr> 

你可以看到你編輯的演示這裏

http://plnkr.co/edit/64vaiPReW8MvhpRHBkQd?p=preview

+0

這不起作用。當你輸入任何東西時,它會顯示消息。 – TheLimeTrees

+0

請立即檢查@TheLimeTrees –

1

How to display length of filtered ng-repeat data

您可以將新變量分配給過濾的表達

<div ng-repeat="person in filtered = (data | filter: query)">

然後,您可以顯示一個新錶行或者div來檢查,如果這個新查詢的長度爲0

<tr ng-show='filtered.length == 0'> 
    <td>No</td> 
    <td>Results</td> 
</tr> 
+0

我覺得這是一種可行的方法,但我不太瞭解它應用它。 – TheLimeTrees