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

Question

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

选择器如下所示:

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

但对它没有影响。

关于如何在所选类型没有数据时显示消息有什么建议吗？

Answer 1

如前所述，答案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>