AngularJS通过编写自定义过滤器自定义搜索数据

Question

假设我以表格格式用ng repeat显示以下数据。

<div class="form-group">
            <label >Search</label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search">
        </div>
<table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Hobby</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="user in users|filter:search">
                                    <td>{{user.id}}</td>
                                    <td>{{user.first_name}}</td>
                                    <td>{{user.last_name}}</td>
                                    <td>{{user.hobby}}</td>
                                </tr>
                            </tbody>
                        </table>

以上代码取自http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

这样我们就可以搜索了。无论用户在搜索文本框中写什么，数据都将基于该过滤器生成，但我的要求有点不同。

我会有一个下拉列表，所有字段的名称将被填充，用户将选择字段名称并在文本框中输入值，数据将在特定的字段名称上搜索，而不是整个结果集。我怎么能做到呢。

寻求指导。

Answer 1

类似的东西，根据Angular文档中的过滤器进行改编，将起作用。

HTML

<label>Search In: <select ng-model="ctrl.searchField"> 
  <option value="_id">ID</option>
  <option value="name">Name</option>
  <option value="phone">Phone #</option>
  <option value="dob">Birthday</option>
</select>

<label>Search For: <input ng-model="ctrl.searchText"></label>
<table id="searchTextResults">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Phone</th>
    <th>Birthday</th>
  </tr>
  <tr ng-repeat="friend in ctrl.friends | filter:ctrl.filterList">
    <td>{{friend._id}}</td>
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <th>{{friend.dob.toDateString()}}</th>
  </tr>
</table>

JavaScript

angular.module("filterApp", []).controller("filterDemo", filterDemo)
function filterDemo() {
  let vm = this;
  vm.searchField = ""
  vm.searchText = ""
  vm.friends = [{
    _id: 12323,
    name: 'Will',
    phone: '555-1276',
    dob: new Date(1990,00,20)
  }, {
    _id: 34645764576,
    name: 'Mike',
    phone: '555-4321',
    dob: new Date(1967,01,02)
  }, {
    _id: 6565656795,
    name: 'Toni',
    phone: '555-5678',
    dob: new Date(1967,05,21)
  }, {
    _id: 2565656,
    name: 'Leilani',
    phone: '808-BIG-WAVE',
    dob: new Date(2007,01,01)
  }, {
    _id: 67567567,
    name: 'Julie',
    phone: '555-8765',
    dob: new Date(1991,12,01)
  }, {
    _id: 477676767,
    name: 'Juliette',
    phone: '555-5678',
    dob: new Date(1991,12,01)
  }, {
    _id: 2565656,
    name: 'Mary',
    phone: '800-BIG-MARY',
    dob: new Date(1991,12,01)
  }]
  vm.filterList = filterList
  function filterList(row) {
    if (vm.searchField && vm.searchText) {
      let propVal = row[vm.searchField]
      if (propVal) {
          return     propVal.toString().toUpperCase().indexOf(vm.searchText.toUpperCase()) > -1;
  } else {
        return false;
      }
    }
    return true;
  };
}

这是一个工作代码笔：http://codepen.io/anon/pen/yOjdJV?editors=1010

Answer 2

您可以这样做。这是完整的代码

<div ng-app="myApp" ng-controller="MyController">
 <label>Field: 
   <select ng-model="selectedFieldName">
      <option value="">--Select Account--</option>
          <option ng-repeat="(fieldname,fieldvalue) in customer[0]" ng-value="fieldname | uppercase">{{fieldname | uppercase}}</option>
   </select>  
</label>
<label>data: <input ng-model="searchText"></label>
    <table class="table table-striped table-bordered">
        <tr>
          <td>ID</td>
          <td>First Name</td>
          <td>Last Name</td>
          <td>Salary</td>
          <td>Date of Birth</td>
          <td>City</td>
          <td>Phone</td>
        </tr>
        <tr ng-repeat="item in customer | filter:SearchList ">
        <!-- orderBy:'$index':false -->
            <td>{{ item.id }}</td>
            <td>{{ item.firstname }}</td>
            <td>{{ item.lastname }}</td>
            <td>{{ item.salary }}</td>
            <td>{{ item.dob }}</td>
            <td>{{ item.city }}</td>
            <td>{{ item.phone }}</td>
        </tr>
    </table>
</div>
;var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
    $scope.selectedFieldName='';
    $scope.searchText='';
        $scope.SearchList = function(row) {
    if ($scope.selectedFieldName && $scope.searchText) {
      var propVal = row[$scope.selectedFieldName.toLowerCase()]+ '';
      if (propVal) {
        return propVal.toUpperCase().indexOf($scope.searchText.toUpperCase()) > -1;
      } else {
        return false;
      }
    }
    return true;    
  };
    $scope.customer = [
      {
          'id': 1,
          'firstname': 'Tridip',
          'lastname': 'Bhattacharjee',
          'salary' : 15000,
          'dob': '05/09/2013',
          'city': 'kolkata',
          'phone': '033 2589 7415'
      },
      {
          'id': 2,
          'firstname': 'Arijit',
          'lastname': 'Banerjee',
          'salary' : 25000,
          'dob': '01/09/2010',
          'city': 'Bihar',
          'phone': '033 2589 9999'
      },
      {
          'id': 3,
          'firstname': 'Dibyendu',
          'lastname': 'Saha',
          'salary' : 20000,
          'dob': '06/09/2011',
          'city': 'Rachi',
          'phone': '033 2589 3333'
      },
      {
          'id': 4,
          'firstname': 'Bisu',
          'lastname': 'Das',
          'salary' : 5000,
          'dob': '05/01/2009',
          'city': 'Silchar',
          'phone': '033 2589 2222'
      },
      {
          'id': 5,
          'firstname': 'Soumyajit',
          'lastname': 'Kar',
          'salary' : 12000,
          'dob': '09/08/2011',
          'city': 'kanpur',
          'phone': '033 3333 1894'
      }
    ];


})

https://jsfiddle.net/tridip/rnoo3bqc/8/