如何通过AngularJS Filter根据下拉选择值过滤表格数据

AI 小北

2026-7-30

问题：AngularJS下拉框过滤表格Status列无效

我有一个带Status列的表格，想通过下拉选择框按状态值过滤表格，下拉框代码如下：

<select class="form-control" ng-model="OrdinanceStatus">
    <option value="">Select your option</option>
    <option value="1">Open</option>
    <option value="3">Amended</option>
    <option value="2">Due for amendment</option>
</select>

表格代码如下，考虑用ng-change但不知道怎么实现：

<div>
    <table class="table table-bordered" id="headerTableRevenue">
        <thead>
            <tr>
                <td>LGU</td>
                <td>Title</td>
                <td>Status</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="a in OrdinanceReport | filter:{Status: OrdinanceStatus.Value}:true">
                <td>{{a.LGU}}</td>
                <td>{{a.OrdinanceTitle}}</td>
                <td>{{a.Status}}</td>
            </tr> 
        </tbody>
    </table>
</div>

我尝试用这个过滤语法但没效果：

filter:{Status: OrdinanceStatus.Value}:true

解决方案

问题核心是过滤表达式错误，以及下拉框ng-model的取值逻辑问题，以下是修正方案：

修正基础过滤表达式
下拉框的ng-model绑定的OrdinanceStatus直接对应选中项的value，不需要.Value后缀。修改后的ng-repeat过滤语法：
```
<tr ng-repeat="a in OrdinanceReport | filter:{Status: OrdinanceStatus}:true">
```
其中:true开启严格匹配，保证只有Status值与下拉选中值完全一致的行才会被保留。
处理空值显示全部数据
当下拉框选中默认空选项时，严格匹配会过滤掉所有行。如果需要空值时显示全部数据，有两种实现方式：
- 自定义过滤函数（推荐，逻辑更清晰）
  在控制器中添加过滤函数：
```
$scope.filterByStatus = function(item) {
    // 未选择状态时返回所有行
    if (!$scope.OrdinanceStatus) return true;
    // 匹配状态值
    return item.Status == $scope.OrdinanceStatus;
};
```
  然后在ng-repeat中使用该函数：
```
<tr ng-repeat="a in OrdinanceReport | filter:filterByStatus">
```
- 取消严格匹配
  去掉:true，空值时会自动显示全部数据，但注意：如果Status是数字类型，下拉框的value是字符串，可能出现类型不匹配导致的异常，建议提前统一类型（比如把下拉选项的value改为数字，或在控制器中将OrdinanceStatus转为数字）。
关于ng-change的使用
常规过滤场景不需要额外添加ng-change，AngularJS的ng-model与filter会自动联动更新表格。如果需要在状态选择变化时执行额外逻辑（比如日志记录、数据预处理），再添加ng-change：
```
<select class="form-control" ng-model="OrdinanceStatus" ng-change="handleStatusChange()">
```
控制器中定义对应函数：
```
$scope.handleStatusChange = function() {
    // 执行额外操作
};
```

内容的提问来源于stack exchange，提问作者Bennie Glarilso