AngularJs #03 How To Use The Filters ( Tutorial )

Image Source

What Will I Learn?

I will learn how to use the filter by angular format data .

• How to declare the filter in the binding expression.
• Different type of filter ' format ' .
• The limitTo filter and the parameters .

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 video we will discuss the filters on angular , filters can do 3 things , they can format sort and filter data , filter can be used with binding expression or a directive , so to apply the filter we must use the pipe character ( | ) in this format :
{{ expression | filterName : parameter }} , use the expression then the name of the filter after that the parameter that you want to pass for this filter the value ..
For the formatting data we have 5 filters

• lowercase : formats all characters to lowercase .
• uppercase : formats all characters to uppercase .
• number : formats a number as text , includes comma as thousands separator and the number of decimal places can be specified .
• currency : formats number as a currency , $ is a default , custom currency and decimal places can be specified .
• date : formats date to a string based on the requested format .
  In the date we have many different formats :
  YYYY : full year exp : 2018
  YY : two digits exp : 18
  MMMM : full mouth .
  MMM : exp Dec , Sep
  MM : exp 01,02
  M : exp 1
  DD : from 01 - 31
  D : from 1 to 31 ( no leading 0 )
  Limit of filter : can be used to limit the number of character in a string , and this is the expression
  {{ expression | limitTo : limit : begin }}
  Now I will give you an example after the introduction , firstly we go to our angular page and create an array with cases are employees
  
  As you see here each employee has name , date of birth , gender and salary , I want to import all these employees on a table in HTML ..
  
  I have created a table with thead and tbody to divide the elements , inside the thead I have the < th > code which is table head also to be bold and in the center , inside the body I used the < td > table data , I added some CSS effects to be more beautiful and clear for the tutorial ..
  
  Just black border and padding to be more beautiful and this is the result :
  
  As you see the employees that I have created with simply they are on our browser , now I will use the filters , firstly as you see for the name of employees , just the first letter is capital the others are small so I will apply the filters to be capital without CSS ..
  
  Here I have use the sign of filter which is the pipe sign '|' then the filter that I want example of first case I want to name with uppercase so I just use the uppercase filter without parameter it will apply it , also for the third element which is the gender with small letter ' lowercase ' , for the date I used a parameter which is the format of date as I choose two digits of day and two also for mouth and 4 digits for the year YYYY and this is the result :
  
  Good all the filters that we used change the format of the data , if you look at the salary there is no organization of thousands or decimal places so I will do it right now ..
  
  Here we give the expression of salary the filter ' number ' to separate the thousands when we give it a parameter this value will make the decimal place if you have 50.456 and you put number:2 it will be 50.45 it will take 2 number after the comma ..
  The same thing if you use the currency filter with the parameter which is the sign of currency exp :
  {{ employee.salary | currency:"$" }} the result will be $50.54
  I want now to use the limitTo I have a great idea to practice this tricks , I want to limit the number of rows of our table to the number that the user choose so I will limit the rows
  
  I have added an input element with type is number to increase and decrease , the step is 1 and the minimum value can take is 0 with the maximum value is 4 because we have 4 rows now , I added also ng-model directive to be dynamically .. and this is the result :
  
  We go to the custom angularJS page to attache the model with the $scope object
  
  I gave it by default the value 3 , now I will just test the limitTo by static value before I link it ..
  
  I have give the ng-repeat expression a filter which is the limitTo and I gave it a static value as parameter equals 3 , so the number of rows will be 3 rows , and this is the result :
  
  I can also give it a begin and limit , I want to start with the second row as we know that the first object it has the index 0 , the second so it has the index 1 ..
  
  This is the result , before we have 3 rows but it starts with Ben now it will start with Sara ..
  
  Now I want to be dynamically operation from the input element when the user enter a number from 0 to 4 the rows will display depends at this number , firstly is by default 3 as I did in the propriety value of $scope
  
  Just I put the ng-model value as a parameter of the filter and the result by default is 3 , you can increase to 4 or decrease to 0
  
  This is the result when I increased the value to 4 , and this is the result when I decreased to 1
  
  Now it is dynamically you can enter the number of rows and it will display from the number that you entered , this is the benefit of the ng-model that we learned before .

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 )

---

Posted on Utopian.io - Rewarding Open Source Contributors

---