筛选表："No search results found"

Question

我有一个带有搜索栏的table，该搜索栏过滤并显示它可以匹配的行。这工作得很好，但我想实现，如果。

如果你决定搜索的内容没有搜索结果怎么办?因为它的立场table将简单地显示什么。我需要的是显示一些文本，比如"没有找到搜索结果"。理想情况下，这将是一个整洁的解决方案，而不是一个警告框或类似的东西。

任何想法?下面有个吊床。

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

http://plnkr.co/edit/KFLbbz0k7ZBcETSvo3L9?p =预览

Answer 1

像这样修改代码

 <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 =预览

Answer 2

参见如何显示过滤后的ng-repeat数据的长度

可以给过滤后的表达式赋值一个新变量

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

您可以显示一个新的表行或div来检查这个新查询的长度是否为0

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