基于多维JavaScript对象的AngularJS过滤器

我有一个表，其中输出了许多行数据。在该表中，我有一个列状态

大约有30个不同的状态值。该列有一个下拉列表，可以按不同的状态进行筛选，但在下拉列表中，我只有以下状态：Any、Pending、Inactive和Placed

4种状态中的每一种都有许多不同的状态值

如果我像这样创建一个JavaScript对象：

var statuses = {
    'Pending': [
         'Entered',
         'Submitted,
         'Approved'
     ]
};

在挂起之后，还有另一个具有更多状态的非活动阵列

---

如何在Angular中创建一个过滤器，以显示结果，而不是下拉列表中的状态为Pending，而是从上面的Pending数组中的状态？

您只需访问状态中的Pending：

$scope.statuses = statuses;

在您的选择中：

---

为了基于所选元素填充表格，必须使用select元素中的ng模型获取值。为了确保ng模型变量在每次进行选择时都得到它，您可以使用ng选项从您的状态填充所有选项。例如：

<select ng-change='loadStats()' ng-model='selectedStatus' ng-options='k as k for (k,v) in stats'>
</select>

选择完成后，要填充表格，需要定义过滤器。筛选器取决于选定状态的数组和所有行。要填充表，可以使用对象数组。这个阵列也可以帮助我们过滤。假设表的数据表示为：

var tableData = [
{status: 'Entered', value: '1'},
{status: 'Entered', value: '2'},
{status: 'Submitted', value: '3'},
{status: 'Approved', value: '4'},
{status: 'A', value: '1'},
{status: 'B', value: '2'},
{status: 'C', value: '1'},
]

现在，为了填充表，我们使用如下定义的过滤器：

var app = angular.module('myApp', []);
app.filter('filterMyStats',function(){
    return function (table, status) {
        return table.filter(function(row){
            if (status.indexOf(row.status) != -1) {
                return true;
            } else {
                return false;
            }

        })
    }
});

我们使用ng重复应用过滤器：

这里有一个

---

状态值反映在表格中，我试图让表格显示所有行，其中状态等于下拉列表中所选值的状态之一。这更清楚吗？用户选择Inactive->code检查Inactive下的所有状态，显示status->Inactive status所在的行。

var tableData = [
{status: 'Entered', value: '1'},
{status: 'Entered', value: '2'},
{status: 'Submitted', value: '3'},
{status: 'Approved', value: '4'},
{status: 'A', value: '1'},
{status: 'B', value: '2'},
{status: 'C', value: '1'},
]

var app = angular.module('myApp', []);
app.filter('filterMyStats',function(){
    return function (table, status) {
        return table.filter(function(row){
            if (status.indexOf(row.status) != -1) {
                return true;
            } else {
                return false;
            }

        })
    }
});

<tr ng-repeat="tr in tableShow | filterMyStats:status">
    <td>{{tr.status}}</td><td>{{tr.value}}</td>
</tr>