Question

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

<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

如果选择框设置为ALL，那么它只会显示与搜索输入中输入内容匹配的行（搜索＆＃34; Last3＆＃34;将返回：

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

但如果＆＃34;年龄＆＃34;从fitler下拉列表中选择，并在搜索输入中输入24，您将获得：

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

如果＆＃34; Last2＆＃34;在搜索输入中键入但是过滤器已设置为＆＃34;年龄＆＃34;，您得到：

LastName, FirstName, Age, Roles, Status

我确定这很简单，我是我的傻瓜。而且我确定我在上面留下了一些代码，但请告诉我，我会纠正它。网格确实填充并且搜索输入确实有效 - 我只是无法弄清楚如何强制搜索输入仅查看特定列。
例如，如果我正在寻找24岁的所有人，那么它目前会找到任何带有＆＃34; 24＆＃34;在里面 - 就像一个电话号码。

Answer 1

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

{
  lastName: 'foo'
}

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

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

并在视图中：

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

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

Answer 2

这是你可以使用的东西。我在选择框中累积了列名。并编写了一个自定义过滤器，以便在选择值时按特定过滤器进行搜索。如果选择“全部”，则搜索所有列。希望它有所帮助。

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和输入值的过滤器

2 个答案: