AngularJS筛选无结果时，如何替换空表格显示‘无数据’提示？

我来帮你搞定这个问题！在AngularJS里实现无数据提示其实很简单，核心是先拿到过滤后的数据集，再根据它的长度来控制提示的显示。下面是具体的实现步骤和代码示例：

步骤说明 #

1. 捕获过滤后的数据集：在ng-repeat指令中使用as语法，把过滤后的数据存储到一个变量中，这样我们就能直接访问过滤结果的长度。
2. 添加无数据提示行：新增一个表格行，通过ng-if判断过滤后的数据集是否为空，为空时就显示"No data"提示。

完整代码示例 #

首先保留你原来的下拉选择器：

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

然后修改表格部分的代码：

<table>
  <thead>
    <!-- 替换成你实际的表头 -->
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <!-- 其他表头列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 正常渲染数据行，同时将过滤结果存入$ctrl.filteredData -->
    <tr ng-repeat="row in $ctrl.filteredData = ($ctrl.data | filter:{type: $ctrl.type})">
      <td>{{row.field1}}</td>
      <td>{{row.field2}}</td>
      <!-- 其他数据列 -->
    </tr>
    <!-- 无数据提示：过滤结果为空时显示 -->
    <tr ng-if="$ctrl.filteredData.length === 0">
      <!-- colspan的值要和表格的总列数一致，确保提示居中 -->
      <td colspan="2" style="text-align: center; padding: 1rem;">No data</td>
    </tr>
  </tbody>
</table>

关键细节解释 #

• $ctrl.filteredData = ($ctrl.data | filter:{type: $ctrl.type})：这行代码把过滤后的数组赋值给$ctrl.filteredData，让我们能在模板中直接判断过滤结果是否为空。如果你的过滤条件不是基于type字段，只需要修改filter里的键名即可。
• ng-if="$ctrl.filteredData.length === 0"：当过滤后的数据集长度为0时，这个提示行就会自动显示出来。
• colspan：必须设置为表格的总列数，这样提示文字会横跨整个表格宽度，视觉上更友好。

内容的提问来源于stack exchange，提问作者Leo Messi