CODEWITHSUNDEEP
javascriptangularjsfilter
LazioTibijczyk
LazioTibijczyk

Reputation: 1957

$filter ui-grid using search fields

At the moment I have a ui-grid with a full name and registration columns. I also have search fields for both. If user searches for registration, the table is updated 'on the fly'. My issue is that if the user enters both to narrow down the search e.g. registration and name at the same time. The table only reacts on a single filter input.

This is part of my code responsible for watching the field vm.model.employeeName and vm.model.registrationName which are the search fields. vm.resultData is an array of rows to be inserted into vm.gridOptions.data (the ui-grid).

vm.watchFilter = function() {

    if (vm.model.employeeName || vm.model.registrationNumber) {

        if (vm.model.employeeName) {
            vm.updatedResultData = $filter('filter')(vm.resultData, {employeeFullName: vm.model.employeeName});
        }

        if(vm.model.registrationNumber) {
            vm.updatedResultData = $filter('filter')(vm.resultData, {currentVehicleRegistration: vm.model.registrationNumber});
        }

        vm.gridOptions.data = vm.updatedResultData;

    } else {
        vm.gridOptions.data = vm.resultData;
    }
    vm.numberOfRecords = vm.gridOptions.data.length;
};

$scope.$watch('vm.model.employeeName', vm.watchFilter);
$scope.$watch('vm.model.registrationNumber', vm.watchFilter);

How do I combine the 2 to get narrowed down search? I've spent hours on this... I don't want to end up with if statements for every possible search as I might add an extra search field in the future. Also if a user decides to enter reg first and then name.....

Upvotes: 1

Views: 52

Answers (1)

Alexis
Alexis

Reputation: 842

I hope this will help you. Thank you.

var app = angular.module('app', ['ngMessages']);

app.controller('pageCtrl', ['$scope', '$http',  function($scope, $http) {  

$scope.names = [{"Name":"Mark","Number":"10000"}, 
                {"Name":"Steve","Number":"20000"}, 
                {"Name":"Bill","Number":"30000"},
                {"Name":"John","Number":"40000"}, 
                {"Name":"Luis","Number":"50000"}];

  $scope.search = function(){
    $scope.criteria = angular.copy($scope.criteria1);
  }
 
  
}]);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-messages.min.js"></script>



<div ng-app="app" class="container" >
  <h1>Filter Name & Registeration Number</h1>
  <hr />
  
  <form ng-controller="pageCtrl" ng-init='getData()'>
    
    <div class='form-group'>
        <div class='row'>
           <div class="right-inner-addon col-md-4 ">        
            <input type="search" ng-model='model.Name' class="form-control" placeholder="Name">
           </div>
           <div class="right-inner-addon col-md-4 ">        
            <input type="search" ng-model='model.Number' class="form-control" placeholder="Registeration Number">
          </div>
        </div>
    </div>
         
     <table class="table table-bordered" >
       <tr>
         <th>Name</th>
         <th>Registeration Number</th>
       <tr>
       <tr ng-repeat="item in filtered = (names | filter : model)">
         <td>{{item.Name}}</td>
         <td>{{item.Number}}</td>
       <tr>
      </table>    
  </form>
  
</div>

Upvotes: 0

Related Questions