Question

我正在创建一个Angular应用程序，并使用jQuery DataTables显示我的数据。

该表有4列（国家，城市，名称，值）。

Country       City         Name       Value
-------------------------------------------
Canada        Ottawa       Name3      100
Canada        Edmonton     Name2      94
Canada        Ottawa       Name1      66
Germany       Berlin       Name1      69
Germany       Berlin       Name3      32
Germany       Hamburg      Name1      71
USA           New York     Name2      42
USA           New York     Name1      52
USA           Los Angeles  Name2      176
USA           Los Angeles  Name3      143
...

我使用三个选择多个输入来过滤表格中的数据。

<div id="country-filter">
    <label for="country-select">Country:</label>
    <select id="country-select" ng-model="vm.selectedValues.Country" ng-options="country for country in vm.filterItems.Country" ng-change="vm.selectionsChanged('Country')" multiple></select>
</div>
<div id="city-filter">
    <label for="city-select">City:</label>
    <select id="city-select" ng-model="vm.selectedValues.City" ng-options="city for city in vm.filterItems.City" ng-change="vm.selectionsChanged('City')" multiple></select>
</div>
<div id="name-filter">
    <label for="name-select">Name:</label>
    <select id="name-select" ng-model="vm.selectedValues.Name" ng-options="name for name in vm.filterItems.Name" ng-change="vm.selectionsChanged('Name')" multiple></select>
</div>

vm.filterItems是一个对象，其数组包含每个选择输入的可能值。

filterItems = {
    Country: ['USA', 'Canada', 'Germany'],
    City: ['New York', 'Los Angeles', 'Ottawa', 'Edmonton', 'Berlin', 'Hamburg'],
    Name: ['Name1', 'Name2', 'Name3']
}

vm.selectedValues与vm.filterItems具有相同的结构，但只包含选定的值。

我想要实现的是，当我选择第一个选择输入中的一个（或多个）国家时，我希望更新另外两个选择输入，并且仅显示数据表中存在的值它被过滤（或禁用不存在的值）。第一个选择输入应保持不变。用户可能已选择在具有类似结果的任何其他选择输入中选择值。

控制器中的

selectionsChanged函数：

var filterCols = ['Country', 'City', 'Name'];

self.selectionsChanged = function (_selection) {
    var selections = [];
    self.selectedValues[_selection].forEach(function (selection, i) {
        selections.push('^' + selection + '$');
    });
    var regex = selections.join('|'),
        api = table.api();
    api.column(_selection + ':name')
        .search(regex, true, false)
        .draw();

    api.rows({ search: 'applied' }).data().each(function (obj) {
        filterCols.forEach(function (c) {
            if (c !== _selection) {
                var column = api.column(c + ':name', { search: 'applied' });
                self.filterItems[c] = getUnique(column.data()).sort();
            }
        });
    });
};

更新filterItems时，会触发所有选择输入的ng-change，使selectionChanged函数被调用三次。这也会更新用户与之交互的选择输入。

示例

如果我在国家的选择输入中选择美国，我希望更新其他两个（城市和名称），并且所有未连接到美国禁用的值。在示例中，城市中的“纽约”和“洛杉矶”选择可以选择的输入，并禁用所有其他输入。名称相似。不应更改国家/地区的选择输入，仍显示“美国”，“加拿大”和“德国”，仅选择美国。

在selectionsChanged函数中更改filterItems时，如何防止ng-change被触发？我只希望当用户在选择输入中选择选项时触发ng-change。

修改

在国家选择输入（或城市选择输入中的城市或名称选择输入中的名称）中选择美国时，表格中仅显示带有美国的四行。

我想要的是更新City和Name的选择输入并禁用表中未显示的所有值。即只应在城市选择输入中启用纽约和洛杉矶，并且应在名称选择输入中启用Name1，Name2和Name3。

除了与所有选项仍应启用的交互选择输入外，只应在表格中启用表格中现有的值。

选项将保持禁用状态，直到用户选择其他国家/地区（或用户过滤的任何列），这将启用现在显示在表格中的城市和名称。

AngularJS - 连接选择输入以在选择后仅显示相关值

0 个答案: