AngularJs #07 How To filter by multiple properties in Angular JS ( Tutorial )

Image Source

What Will I Learn?

I will learn how search by multiple proprieties in two different search boxes and in one search box.

• How to search in two different search boxes by multiple proprieties .
• How to search by one search box with all proprieties .
• How to search by one search box with multiple proprieties ( function ) .

Requirements

• Basic Knowledge of HTML and CSS language .
• Basic Knowledge of JavaScript language .
• Has an editor text support HTML and JavaScript .
• Must has the angular files from the official site .

Difficulty

• Basic

Tutorial Contents

In this tutorial we will discuss how to filter by mulitple proprieties , this is continuation to part 6 so please read the previous part to be ready , I will give you an idea what we will create two search boxes , search name by this box you can search by only the name and the city search box to search only the cities , also a check box named exact match the search will be an exact match , so what is the exact match search ?
For example if you take the search box name when we type something for example ' B ' the name has this letter will display , but if we click on exact match checkbox this column will not display because we haven't a column has just the letter ' b ' as name as a complete name but when we type the full name " ben " for example the column will display again , let's see how to do it

This is the same example that we created in the previous parts a table has 4 columns , the name , gender , salary and the city , I have used the ng-repeat " employee in employees to loop the columns " and this is the table in Angular JS

I have created an array named " employees " has 4 objects each one has 4 elements " Name , Gender , Salary and City " and I attached it with the $scope object , this is the result :

Now I will add a search box text by name and city to search by them by the ng-model attribute to be dynamically

I added a input to search , the type of this input is text to accept all sentences , also the attribute ng-model to be in the filter and to be dynamically , and placeholder to be more clear this is the result when I type the letter B

Now what I will do is to change the propriety to search by city , just I will change the propriety of the model by name , we try it ..

Here I just change the propriety of the ng-model attribute to searchText.city so I will search by city and this is the result :

As you see if I type the letter B and I want to search by name nothing will display because the propriety is the city , but if I type the letter P which is the first letter of Paris this is the result

Now I will create a multiple search by the name and the city and one of the exact match choice , let's see it ..

This is the two search boxes the first by name has the propriety of ng-model the name and the second has the city as propriety this is the result

I searched by the name by letter B it's Ben and the city by L it means London and the first column will appear

To prove to you that the search by city and name works successfully This is the result the table is empty as you see .
Now let's implement the " Exact Match " for that we need a check box it's an input with type="checkbox"

This is the check box input with a ng-model named exactMatch to link it with the filter of search it's a boolean value if we check it , it will be true else it will be false and I will attach it by the $scope , and we use this ng-model propriety in the filter now I will to apply it we use the " : " sign , and this is the result :

So this is the result I type the letter b in the search box of the name and the letter L in the search box of the city it's just a search by any letter in the table

Now if I click on the check box it gone because it's not a exact match but look now

If I complete typing the name and the city exactly like it is in the table this is the result , the first row display .
Now let's look to another example , the example is we have two search boxes each one search about specific propriety but it we have just one search box it will search in all columns all what you do is :

I remove the check box exact match and the second input of city , so just one input can search for all values in the table

Here just I type the first letter of Sara and this is the result , two values " Paris " and " Sara "

And I type the salary and this is the result it gave us the column of this salary , all what I want it's to give you the way to search by multi columns
The very important thing that I want to do is to search by multiple proprieties in one search box by city and name , let's see how to do it ..

I change the placeholder to search for city and name , also the filter I type search it's a variable I will link it with a function to search for the item that you type on the search box

Now I attached a function called search it's going to be a function with parameter ' item ' which is the element to search , Now if you look to the model propriety of the input search it's " searchText " so I check ' if ( the search text that I was typing is undefined ) the function will check for any element in the search box if you want to display just return a true else return a false , else if it's not undefined I will take the element by the item.name and convert it to lowerCase to facilitate the search operation and search into it by the indexOf function , int the parameter of this function I take the value of search box by the model " searchText " convert it to lowerCase and look at the result it's not equal to "-1" or no , if it not equals to -1 I will return true to display this element , this search can be by the name or " || " by this sign it means or , search by city the same code , else return false .


I type " Sar " name and the column of Sara appear also the London city and this is the result .

This is the result when you type undefined value .

Curriculum

• AngularJs #01 Installation of Module , Create and Use Controller , Use Directive
  
• AngularJs #02 How To Use The Directive ' ng-src and ng-repeat ' ( Tutorial )
• AngularJs #03 How To Use The Filters ( Tutorial )
  
• AngularJs #04 How To Use The orderBy Flter To Sorting Data With Two Methods ( Tutorial )
  
• AngularJs #05 How To Make Column Clickable To Sort Data in Ascending or Descending Order ( Tutorial )
  
• AngularJs #06 How To Handle Events , And Search Filter In Angular JS ( Tutorial )
  

---

Posted on Utopian.io - Rewarding Open Source Contributors

---