Easy Code Stuff: Quick Start With AngularJS Repeat Along With Filters

In This Article I'm Going To Explain You Guys About Using AngularJS Repeat (ng-repeat) Along With Filters. AngularJS Repeat Used To Bind HTML Elements Once for Each Item In An Array Or Object Of Data.

Hope You Have A Simple Idea About AngularJS And ng-init.If You Are New To These Please Click Here Before Start.

Lets Start With Simple AngularJS Code Along With A Data Array Which Contains Array Of Names.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
    </div>
</body>
</html>

Now Lets Bind These Names Into A Un-Ordered List. ng-repeat Will Loop Through The Array Just Like A Simple For Each Loop In JQuery. So Lets Do It. I Will Loop Through All The Names And Bind It Inside The <li> Tag Using AngularJS Expression.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names">
         {{Name}}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Nifal
Gowtham
Dinesh
Hudhaifa
Sam
Anderson

So We Are Done With ng-repeat. Lets See How We Can Use Filters. Actually What Filters Does Is, Its Return A Subset Of Items From An Array. AngularJS Provides Following Filters To Use.

lowercase : Converts A String To Lower Case.
uppercase : Converts A String To Upper Case.
filter : Selects A Subset Of Items From An Array.
orderby : Order The Array Elements By Using Given Expression.
currency : Formats A Number Into Currency.

Lets Use These Filters. I'm Going To Make All The Names To Upper Case Now By Using Following Expression.

1	{{ Name \| uppercase }}

If You Want To Make It Lowercase Simply Use Replace The "uppercase" With "lowercase".

1	{{ Name \| lowercase }}

Lets See How We Can Use Filters.This Is How We Create Strings In AngularJS. For That I'm Using A Text Field To Enter The Filter Text.

1	Filter Text: <input type="text" ng-model="FilterText">

Lets Apply This Filter To Our Code.

1	ng-repeat = "Name in Names \| filter:FilterText"

Lets See Our Full Code.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    Filter Text: <input type="text" ng-model="FilterText">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names | filter:FilterText">
         {{ Name | uppercase }}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Hope You Had Good Knowledge About AngularJS Expressions And Variables.

Check My Next Article About AngularJS Controllers.

Easy Code Stuff

Dec 2, 2015

Quick Start With AngularJS Repeat Along With Filters

No comments:

JWT Token Decode Using Jquery