Angularjs filter by multiple property in controller, ignore case

angularjs filter multiple values angularjs filter multiple fields angularjs multiple filter example angularjs filter multiple properties ng-repeat filter or angular filter multiple inputs angularjs filter multiple parameters filter multiple fields using single input in angularjs

Angularjs Filter is very really handing when we need to filter records from a complex object array. I was looking Angular way to filter my records and found some interesting things from different websites, which I will try to summarise and explain in more detain in this article. We will see how to use filter in ngRepeat, ngOption and inside our controller because using filter in controller is a little bit different but really that is easy. We are going to use the SJON data structure for our examples from NorthWind database which is available as json from http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$expand=Order_Details&$format=json

Let's write a simple service to get data from above rest url, and use ng-init to load the data on page load ng-init='getData()' in our html:

$scope.getData = function(){
    $http.get('http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$expand=Order_Details&$format=json')
    .then(function(response) {
        $scope.data = response.data;
    });
}

Nothing complicated to explain. Following code will show the tabular view of data:

<table class="table table-bordered" >
   <tr>
     <th>Customer ID</th>
     <th>Ship To Name</th>
     <th>Address</th>
     <th>City</th>
     <th>Country</th>
   <tr>
   <tr ng-repeat="item in data.value">
     <td>{{item.CustomerID}}</td>
     <td>{{item.ShipName}}</td>
     <td>{{item.ShipAddress}}</td>
     <td>{{item.ShipCity}}</td>
     <td>{{item.ShipCountry}}</td>
   <tr>
</table>  

* Single text box to search on all properties OR only only property*
No filter, nothing, just ngRepeat to show all the orders. Now we will add a text box to search the data on every column:

<div class='row'>
   <div class="right-inner-addon col-md-6 ">
    <i class="icon-search"></i>
    <input type="search" ng-model='searchText' class="form-control" placeholder="Search">
  </div>
</div>

It is simple textbox with ngModel searchText', add this filter to our ngRepeat. We need to change ngRepeat tr only like this:`

Now if you type anything in this text box, result will automatically update, nothing new, simple filter, we all now it. See this woking code pen demo here

What if I want to search by only country Again we need to change only the ngRepeat row filter like this <tr ng-repeat="item in data.value | filter : {ShipCountry: searchText}"> Check this working demo

Multiple Fields Search: automatic and only after clicking search button We can see how we can write the code so when user type the text in a text box and result will be filtered, for this we are going to add some text boxes for each field to search like customer Id, Ship to name, Address, City and country. Here is the HTML changes for this situation.

<div class='form-group'>
    <div class='row'>
       <div class="right-inner-addon col-md-4 ">        
            <input type="search" ng-model='criteria.Id' class="form-control" placeholder="Customer ID">
       </div>
       <div class="right-inner-addon col-md-4 ">        
            <input type="search" ng-model='criteria.name' class="form-control" placeholder="Ship To Name">
      </div>
       <div class="right-inner-addon col-md-4 ">        
            <input type="search" ng-model='criteria.address' class="form-control" placeholder="Address">
      </div>
    </div>
</div>

<div class='form-group'>
    <div class='row'>
         <div class="right-inner-addon col-md-4 ">        
            <input type="search" ng-model='criteria.city' class="form-control" placeholder="City">
         </div>
         <div class="right-inner-addon col-md-4 ">        
            <input type="search" ng-model='criteria.country' class="form-control" placeholder="Country">
        </div>
         <div class="right-inner-addon col-md-4 ">        
            <input type="submit" class="btn btn-success pull-right" value='Search' />
        </div>
        </div>
</div>

Note we are using creiteria object to keep add the values typed by user, first we use the filter in HTML to filter by property, so our ngRepeat will be like this:

 <tr  ng-repeat="item in data.value | filter : {
    CustomerID : criteria.Id, 
    ShipName: criteria.name, 
    ShipAddress: criteria.address, 
    ShipCity: criteria.city, 
    ShipCountry: criteria.country }">

Before jumping to use the same login to use in controller and search the data from data base according to the search criteria, I want to add the total of the searched records, for this we need to keep filtered records in a variable and use that variable length to show the total. see the updated ngRepeat code:

 <tr ng-repeat="item in filtered = (data.value | filter : {CustomerID : criteria.Id, 
      ShipName: criteria.name, 
      ShipAddress: criteria.address, 
      ShipCity: criteria.city, 
      ShipCountry: criteria.country })">

We store the searched records into filtered variable and use <h3> Total Records: {{filtered.length}}</h3> HTML anywhere on the page to show the total of searched records. See the demo

If you don't want to assign those big list in filter then we can use the property name as it is (name as well as case in our criteria) in our creiteria and put criteria as filter

<tr ng-repeat="item in filtered = (data.value | filter : criteria)">

Better to see this live demo

If your target is only to give the search on clicking of button, then there is only minor change, leave the ngRepeat code as it is and change the criteria to criteria1 in our HTML like criteria1.city, criteria1.country etc. and on clicking the button just copy the criteria1 to criteria on the scope and everything will work smooth. Method to copy the entered values to the variable used in our filter:

 $scope.search = function(){
    $scope.criteria = angular.copy($scope.criteria1);
 }

 // Html button code change
 <input type="button" 
    class="btn btn-success pull-right" 
    value='Search' 
    ng-click="search()" />

Try this demo on the code pen

**If you want to fetch records from database on the basis of user entered search criteria then there is no change the angular or html, just you need to pass the parameters and get the data and show that on the page. We are not going to discuss the service or WebAPI or any restful service.

Ali Adravi Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
  • angularjs
  • filter
By Ali Adravi On 30 Jan, 17  Viewed: 2,186

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 10,099

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 39,381

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 15,001

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 3,032

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 26,007