Question

我有一个带有搜索栏的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

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=preview

Answer 2

请参阅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>

过滤表：“未找到搜索结果”

2 个答案: