Introduction

Hello Everyone!

Today I am here to tell you about the services of AngularJS. Our today goal is to know the working of AngularJS filter service. We learned about the directives of AngularJS there uses and implementations. So to see the working of AngularJS filter we also need some important directives to define it.

So what is AngularJS filter is? It is a predefined object of AngularJS same as $scope, which we learned in previous lectures. If you don’t know, do visit this lecture “Controller directive in AngularJS with scope inheritance“. It is defined by the name of this object that it does filtration. It will give you the desired thing which you have been looking for.

In many websites even in your cell phones, you have seen that in the search portion when we write only one alphabet it shows all the names starting with that alphabet. The more you write the more specific name comes in front of you. This is what we are going to do.

Outlines

  • New Project
  • Important Points
  • AngularJS Library Source
  • JavaScript
  • HTML Code for AngularJS $filter Object
  • AngularJS $filter Service Code
  • Images
  • Precautions
  • Conclusion

Description

There points tells us what we needed for our project. On the basis of these points we shall work to make our goal.

New Project

As you all know We need to make a new project. If you don’t know how to make new project do visit my previous lecture “AngularJS Development – Hello Word“.

Important Points

  • ng-app

It is the main directive required for every app of AngularJS. I described it in previous lecture “AngularJS Development – Hello Word“. Do visit them.

  • ng-controller

It is also defined in previous lecture “Controller directive in AngularJS with scope inheritance“. The controller which controller the module of javascript.

  • ng-model

As you know before, what is the function of this directive. If you don’t, do visit my previous lecture “AngularJS ng-change directive use with simple script“. It will help you in detail.

  • ng-repeat

This directive gives the list of values stored. It repeats the items. This instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item. I deals like a collection and runs like a for each loop. I shall use it to generate a multiple set of label at run time.

  • $scope

It is a predefined object of AngularJS as I explained it in my previous lecture “Controller directive in AngularJS with scope inheritance“. Do visit it.

  • $filter

It is basically a predefined object of AngularJS. All the predefined objects of AngularJS are known as services. AngularJS $filter is helping for filtering collection of data. It sort data and group them. As the name defines that it filters the list to search the desired thing.

  • $watch

It is also a predefined object of AngularJS. The $watch allows to keep the changes live. What ever changes happen, we are going to observe it. It always works on a specific model, defined in it.

  • JavaScript

As you know AngularJS is the library of javascript. So It requires so script to handle it’s code. It contains a module and a controller function for controlling this module. Inside the controller function a new function containing the logic. $scope will be passed in this function for writing the logic.

  • Json Object

It is basically a javascript object. It is used to connect two different technologies. Json is just a key value pear.

Description

These above are the important points which you should know before handling AngularJS filter object. This all we needed in our code to make it run.

AngularJS Library Source

As you know we need AngularJS library source in every AngularJS app to make it work properly. So The below script is the source of AngularJS library to make AngularJS filter object work.

Description

This script must be added in the header so that the could can get the source and work properly. If you don’t add this the code will not work at all.

 JavaScript

The below code is the script required of AngularJS filter object implementation.

Description

So what do we have here? The above code is showing the javascript containing a module. I named my module as “mymodule“.I placed the module inside a variable as per the same name of the module. Now as you know I needed a predefined controller function to handle my module. I named my controller function as “x“. You can give names what ever you like to but remember these names while reusing them.

Now inside the function I created another function and passed $scope object init. Now I am able to write my logic in this function.

You noticed I also passed filter object inside the function. After it I made a Json object with the name car and placed an array list which contains pear of multiple key values, which contains dummy data. Actually I created a new Json object with the help of $scope.

I made another property with the help of $scope and placed the json object in it.

My actual function is now, as you can see I took $watch service to make filter service work.

$filter is helping for filtering collection of data while $watch allowing me to keep the changes live. What ever changes happen, we are going to observe it.

Remember $watch always works on a particular model passed in it. So I passed “search” which is actually the name of my model.

The logic of $watch is inside the javascript function which is taking a parameter “value“.

Now the statement shows that I am applying my logical code with the help of my $filter service which will be doing filter in “care2” on the base of value passed in the function. The keyword filter inside the $filter tell that what operation should be don on the collection.

“$scope.cars = $filter(‘filter’)($scope.cars2 , value)”

 

 HTML Code for AngularJS filter Object

As you all know AngularJS only works inside the HTML file. So we needed the HTML for AngularJS filter service. The required HTML code is shown below.

Description

This is the basic HTML code which we need for AngularJS value directive. If you see inside the body tag, I placed a div tag. Inside the div tag I placed an input tag and a table tag. The input tag will take the input and will show the desired output.

If you run this code into the browser it will show you the output as shown in the image below.

AngularJS filter

As you can see this shows o text are where we can write anything we wanted to like I wrote My website name.

These are the basic tools that we required for AngularJS filter object implementation.

AngularJS filter Service Code

The below code is the complete implementation of AngularJS filter service.

Description

As you see in the above code, I placed the AngularJS library source in the head of HTML file. Then I placed my javascript in it which will control my functions of AngularJS include directive. Now take a closer look, I applied ng-app directive on the body to make it the owner of AngularJS include directive code and I passed the name of the module to make a bond.

In the div tag I applied ng-controller directive and placed the name of the controller function in it as “x” because it is to be controlled by it. In the input tag I assigned ng-model and gave the name of my model which is passed in $watch service inside the script. Inside the tr tag I applied ng-repeat which will work like a loop, it will take car from cars and will show us the dummy data in a list form.

Then in the data I wrote two expression and concatenated the name of ng-repeat directive with the key pears present in the json object to display the array list.

Images

The following picture will show you what we were doing so far for AngularJS filter service.

AngularJS filter

As you can see the array appeared in front of us which was placed inside the json object. Now see how it works, if you write something inside the text area the AngularJS filter service will do filtration for the search of that particular object as shown below.

AngularJS filter AngularJS filter

As you can see on writing “s” it filtered out only one object same as for “h”. This is the required output we have been working for. This is how AngularJS filter service works.

Description

These are the detailed pictures which I showed for you help. Hope you all understood it well. AngularJS filter service helps you just like a directory.

Precautions

Always place the script tag of source of AngularJS. Must define the ng-app directive. Always place “;” at the end of every statement inside the script. Be careful with the names you provide, they are care sensitive.

Conclusion

So We learned the use of services of AngularJS. AngularJS filter service is used to filter objects with the help of $watch service which helps to keep the change live. If you have any problem or if something is missing do comment us. AngularJS filter service is not restricted to do filter only. I can do more tasks also.