AngularJS custom search data by writing custom filter

Question

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.

why negative because i am looking for concept because i am new in angular. — Monojit Sarkar, Apr 18 '16 at 15:26

Mike Feltman · Accepted Answer · 2016-04-19T13:25:13.540

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

can u please provide js fiddle link which i can run and understand the full code. — Monojit Sarkar, Apr 18 '16 at 18:04
My example is actually a little more complex than it needs to be. There's an example of this with a Plunker in the angular docs for filter. The plunker is here: https://plnkr.co/edit/?p=preview — Mike Feltman, Apr 18 '16 at 18:14
Actually the doc isn't quite right for you. Here's a Codepen adapted from the doc: http://codepen.io/anon/pen/yOjdJV?editors=1010 — Mike Feltman, Apr 18 '16 at 18:38
thanks for your code but i do not see in code when function filterList() is getting called ? filterList() has no relation with searchText. would you mind to explain how the search is working? — Monojit Sarkar, Apr 18 '16 at 18:47
i have check code and found that controller function filterList() never getting called.......fix it and give me fresh code after check. — Monojit Sarkar, Apr 18 '16 at 19:02
The filter list function is called directly on the ng-repeat line like this: — Mike Feltman, Apr 18 '16 at 19:03

score 0 · Answer 2 · answered Apr 19 '16 at 13:15

you can do it this way. here is full code

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

AngularJS custom search data by writing custom filter

2 Answers2

HTML

JavaScript

Linked