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

问题描述

假设我使用 ng-repeat 以表格格式显示以下数据.

<标签>搜索</label><input type="text" ng-model="search" class="form-control" placeholder="Search">
<table class="table table-striped table-hover"><头><tr><th>Id</th><th>名字</th><th>Last Name</th><th>爱好</th></tr></thead><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>

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

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

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

寻求指导.

解决方案

这样的事情，改编自 Angular docs for filter 将起作用.

HTML

搜索:<option value="_id">ID</option><option value="name">Name</option><option value="phone">电话号码</option><option value="dob">生日</option></选择>
搜索:<table id="searchTextResults"><tr><th>ID</th><th>姓名</th><th>电话</th><th>生日</th></tr><tr ng-repeat="朋友在 ctrl.friends | filter:ctrl.filterList"><td>{{friend._id}}</td><td>{{friend.name}}</td><td>{{friend.phone}}</td><th>{{friend.dob.toDateString()}}</th></tr>

JavaScript

angular.module("filterApp", []).controller("filterDemo", filterDemo)函数过滤器演示(){让 vm = 这个；vm.searchField = ""vm.searchText = ""vm.friends = [{_id: 12323,name: '将',电话:'555-1276'，出生日期:新日期(1990,00,20)}, {_id: 34645764576,name: '迈克',电话:'555-4321'，出生日期:新日期(1967,01,02)}, {_id:6565656795，name: '托尼',电话:'555-5678'，出生日期:新日期(1967,05,21)}, {_id:2565656，name: '莱拉尼',电话:'808-BIG-WAVE',出生日期:新日期(2007,01,01)}, {_id: 67567567,name: '朱莉',电话:'555-8765'，出生日期:新日期(1991,12,01)}, {_id:477676767，name: '朱丽叶',电话:'555-5678'，出生日期:新日期(1991,12,01)}, {_id:2565656，name: '玛丽',电话:'800-BIG-MARY'，出生日期:新日期(1991,12,01)}]vm.filterList = 过滤器列表函数过滤器列表(行){如果(vm.searchField && vm.searchText){让 propVal = row[vm.searchField]如果(propVal){return propVal.toString().toUpperCase().indexOf(vm.searchText.toUpperCase()) >-1;} 别的 {返回假；}}返回真；};}

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

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>

above code taken from 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 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.

looking for guidance.

解决方案

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

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

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

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