根据 SELECT 和输入值过滤

Question

好的，我漏掉了一些东西。基本上我有一个网格。它上面是一个 search/filter 栏（我允许搜索所有数据，但我也试图让它们将搜索输入定位到数据集中的特定列。

<label>Search: </label>
<input id='searchTerm' ng-model='searchTerm'/>
<label>Filter: </label>
<select id='filterKey'ng-model="filterList">
<option value='$'>ALL</option>
<option ng-repeat='dKey in dataKeys' value='{{dKey}}'>{{dKey}}</option>
</select>

所有数据都会填充到下拉过滤器和网格中。所以，

LastName, FirstName, Age, Roles, Status Last1 First1 23 Mgt Retired Last2 First2 24 Mgt Retired Last3 First3 24 Mgt Retired Last3 First4 22 Mgt Retired Last5 First5 25 Mgt Retired

如果 select 框设置为 ALL，则它只显示与搜索输入中输入的内容匹配的所有行（搜索 "Last3" 会 return:

LastName, FirstName, Age, Roles, Status Last3 First3 24 Mgt Retired Last3 First4 22 Mgt Retired

但是，如果 "age" 是从 fitler 下拉列表中 select 编辑的，并且在搜索输入中输入了 24，您将得到：

LastName, FirstName, Age, Roles, Status Last2 First2 24 Mgt Retired Last3 First3 24 Mgt Retired

如果在搜索输入中输入 "Last2"，但过滤器已设置哟 "age"，您会得到：

LastName, FirstName, Age, Roles, Status

我确定这很简单，但我正在挣扎。我确定我在上面遗漏了一些代码，但请告诉我，我会更正它。网格确实填充并且搜索输入确实有效 - 我只是不知道如何强制搜索输入仅查看特定列。
例如，如果我正在寻找 24 岁的每个人，并且它当前会找到其中包含“24”的任何数据 --- 就像 phone 数字。

Answer 1

要搜索属性 lastName 个对象，过滤器必须是

{
  lastName: 'foo'
}

因此，在您的控制器中创建一个函数，该函数 returns 一个具有所选键和输入值的对象，并将此函数的结果用作过滤器：

$scope.getFilter = function() {
    var result = {};
    result[$scope.filterList] = $scope.searchTerm;
    return result;
}

并且在视图中：

ng-repeat="list | filter:getFilter()"

您真的应该将 filterList 重命名为更有意义的名称，例如 filterKey。

Answer 2

这是您可以使用的东西。我在 select 框中累积了列名。并编写了一个自定义过滤器，以便在 selected 值时按该特定过滤器进行搜索。如果 'ALL' 被 selected 那么它正在搜索所有列。希望对你有帮助。

var app = angular.module('appX', []);

app.controller('ctrlX', function($scope) {
  $scope.dataSet = [{
    firstname: 'first 1',
    lastname: 'last 1',
    age: '24',
    sex: 'F'
  }, {
    firstname: 'first 2',
    lastname: 'last 2',
    age: '21',
    sex: 'M'
  }, {
    firstname: 'first 3',
    lastname: 'last 3',
    age: '24',
    sex: 'M'
  }, {
    firstname: 'first 4',
    lastname: 'last 4',
    age: '26',
    sex: 'F'
  }];

  $scope.keyList = [];
  angular.forEach($scope.dataSet, function(val, key) {
    angular.forEach(val, function(v, k) {
      if ($scope.keyList.indexOf(k) < 0) {
        $scope.keyList.push(k);
      }
    })
  })
})

app.filter('mycustomSearch', function() {
  return function(input, option) {
    if (!option.type || !option.term) {
      return input;
    }
    var result = [];
    angular.forEach(input, function(val, key) {
      if (val[option.type].indexOf(option.term) > -1) {
        result.push(val);
      }
    })
    return result;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appX">
  <div ng-controller="ctrlX">
    <label>Search:</label>
    <input id='searchTerm' ng-model='searchTerm' />
    <label>Filter:</label>
    <select id='filterKey' ng-model="filterList" ng-options="x for x in keyList">
      <option value=''>ALL</option>
    </select>
    <div>
      <table>
        <thead>
          <tr>
            <th ng-repeat="x in keyList">{{x}}</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="x in dataSet | mycustomSearch:{term:searchTerm, type:filterList} | filter: searchTerm">
            <td>{{x.firstname}}</td>
            <td>{{x.lastname}}</td>
            <td>{{x.age}}</td>
            <td>{{x.sex}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

根据 SELECT 和输入值过滤

filter based on SELECT and input value

search

filter

angularjs

ng-repeat

ng-options