如果过滤返回空结果，过滤器不会显示消息而不是表格答案

【问题标题】：Filter does not show a message instead of a table if the filtering returns empty result如果过滤返回空结果，过滤器不会显示消息而不是表格
【发布时间】：2018-10-01 01:01:45
【问题描述】：

有一个包含数据的表和一个必须根据选择器中的选择过滤数据的选择器，如果过滤没有返回数据，我想显示一条消息（“无数据”）。

选择器如下所示：

<select ng-model="$ctrl.type">
    <option value="">All</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

表在这里生成：

<tbody>
    <tr ng-repeat="rows in $ctrl.myData | filter: {Type: $ctrl.type} track by $index">
        <td>
            <span>{{rows.Type}}</span>
        </td>
        <td>
            <span>...</span>
        </td>
    </tr>
</tbody>

myData 是一个对象数组，例如：

myData = [
        {Type: "1", SiteId: 8, SiteName: "aaa"},
        {Type: "1", SiteId: 7, SiteName: "asb"},
        {Type: "2", SiteId: 1, SiteName: "aaa"},
        {Type: "1", SiteId: 17, SiteName: "x"},
        {Type: "2", SiteId: 7, SiteName: "xx"}
];

它现在可以正常工作，但是当我选择3 时，它显示表格标题并且没有数据。在这种情况下，我想显示一条消息而不是表头。

我尝试用ng-if 包裹ng-repeat，如下所示：

<tbody>
    <div ng-if="$ctrl.myData.filter(s => s.Type == $ctrl.type).length > 0"> 
        <tr ng-repeat=...>
            ...
        </tr>
    </div>
    <div ng-if="$ctrl.myData.filter(s => s.Type == $ctrl.type).length == 0"> 
        NO DATA FOR THIS OPTION
    </div>
</tbody>

但对它没有影响。

如果选定的Type 没有数据，有关如何显示消息的任何建议？

【问题讨论】：

这个stackoverflow.com/questions/14615495/…的可能副本
你的问题解决了吗？
还没有，想知道这个问题能不能解决我的问题

标签： javascript angularjs select html-table

【解决方案1】：

试试："rows in $ctrl.myData | filter: {Type: $ctrl.type} as filtered track by $index " 在你的桌子下面<div ng-if="!filtered.length">No results</div> https://plnkr.co/edit/diNlE0lS8eFttvgBUHug?p=preview

【讨论】：

【解决方案2】：

如前所述，请回答here，您可以按如下方式更新您的代码。希望能解决你的问题

<tbody>
         <tr ng-repeat="rows in filteredData = ($ctrl.myData | filter: {Type: $ctrl.type} track by $index">
            <td>
                <span>{{rows.Type}}</span>
            </td>
            <td>
                <span>...</span>
            </td>
        </tr>
        <div ng-hide="filteredData.length"> 
            NO DATA FOR THIS OPTION
        </div>
    </tbody>

【讨论】：