通过编写自定义过滤器，AngularJS自定义搜索数据 [英] AngularJS custom search data by writing custom filter

问题描述

假设我在下面以ng-repeat的表格格式显示数据.

suppose i am showing below data in tabular format with 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/

这样，我们可以进行搜索.无论用户在搜索文本框中输入哪种内容，都将基于该过滤器生成数据，但我的要求却有所不同.

so this way we can search. whatever user write in search textbox that data will be generated based on that filter but my requirement is bit different.

i将具有一个下拉列表，其中将填充所有字段名称，并且用户将选择字段名称并将值放在文本框中，并且将在该特定字段名称(而不是整个结果集)上搜索数据.我怎么能做到呢?

i will have a dropdown where all fields name will be populated and user will select fields name and put value in textbox and data will be searched on that particular field name not entire result set. how could i achieve it.

寻找指导.

推荐答案

从Angular文档改编为过滤器的类似内容将起作用.

Something like this, adapted from the Angular docs for filter will work.

<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>

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;
  };
}

这是一个有效的Codepen: http://codepen.io/anon/pen/yOjdJV?editors = 1010

And here's a working codepen: http://codepen.io/anon/pen/yOjdJV?editors=1010

这篇关于通过编写自定义过滤器，AngularJS自定义搜索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！