大佬教程收集整理的这篇文章主要介绍了通过编写自定义过滤器，AngularJS自定义搜索数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决通过编写自定义过滤器，AngularJS自定义搜索数据？

从Angular文档改编为filter的东西可以正常工作。

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

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

解决方法

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

大佬总结

以上是大佬教程为你收集整理的通过编写自定义过滤器，AngularJS自定义搜索数据全部内容，希望文章能够帮你解决通过编写自定义过滤器，AngularJS自定义搜索数据所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。