Post
Ask Question

Start With AngularJS: Part 5

Before reading this article, I highly recommend reading the previous part of the series:

Filter in AngularJS

It is used for format data before displaying it to users. Here it can be used in view templates, controllers, services and directives.

AngularJS provides filters to transform data:

  • Currency: - Format a number to a currency format.
  • Date: - Format a date to a specified format.
  • Filter: - Select a subset of items from an array.
  • Json: - Format an object to a JSON string.
  • Limit To: - Limits an array/string, into a specified number of elements/characters.
  • Lowercase: - Format a string to lower case.
  • Number: - Format a number to a string.
  • Order By: - Orders an array by an expression.
  • Uppercase: - Format a string to upper case.
Let’s start creating filter projects:
  1. Open old visual studio project
  2. Add new html file with name of Filter.
  3. Add bootstrap cdn also.

    code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Filter Demo</title>  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.         <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8.             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">  
  9.                 </script>  
  10.                 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">  
  11.                     </script>  
  12.                     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  13.                         </script>  
  14.   
  15.   
  16. </head>  
  17.   
  18. <body>  
  19.     <script>  
  20.         var members = [  
  21.           {  
  22.             username: 'Shiva',  
  23.             address: 'Delhi',  
  24.             sallery: '25000',  
  25.             Designation: 'Software Developer'  
  26.         }, {  
  27.             username: 'Rahul',  
  28.             address: 'Noida',  
  29.             sallery: '20000',  
  30.             Designation: 'Software Developer'  
  31.         }, {  
  32.             username: 'Kshma',  
  33.             address: 'Mumbai',  
  34.             sallery: '26000',  
  35.             Designation: 'Software Designer'  
  36.         }, {  
  37.             username: 'Ashita',  
  38.             address: 'Varanasi',  
  39.             sallery: '22000',  
  40.             Designation: 'Teacher'  
  41.         }];  
  42.   
  43.         var app = angular.module("app", []);  
  44.         app.controller("ListController", ["$scope", function($scope) {  
  45.             $scope.Members = members;  
  46.         }]);  
  47.     </script>  
  48.   
  49.     <divng-app="app" ng-controller="ListController">  
  50.         <h3>Exact or contains filter</h3>  
  51.         <div>  
  52.             Filter Username or address or sallery:  
  53.             <input type="text" ng-model="mysearch.$" /> Address only:  
  54.             <input type="text" ng-model="mysearch.address" /> sallery :  
  55.             <input type="text" ng-model="mysearch.sallery" />  
  56.         </div>  
  57.         <div class="container">  
  58.             <div class="table-responsive">  
  59.                 <table class="table">  
  60.                     <thead>  
  61.                         <tr>  
  62.                             <th>UserName</th>  
  63.                             <th>Address</th>  
  64.                             <th>sallery</th>  
  65.                             <th>Designation</th>  
  66.                         </tr>  
  67.                         <trng-repeat="member in Members | filter: mysearch:exact">  
  68.                             <td>{{member.username}}</td>  
  69.                             <tdng-bind="member.address">  
  70.                                 </td>  
  71.                                 <td>{{member.sallery}}</td>  
  72.                                 <td>{{member.Designation}}</td>  
  73.                                 </tr>  
  74.                     </thead>  
  75.                     </table>  
  76.                     </div>  
  77.                     </div>  
  78.   
  79.                     </div>  
  80.   
  81. </body>  
  82.   
  83. </html>  
Output

output

Template: An angular template can have Directive, HTML markup, CSS, Filters, Expressions and Form controls. Templates are used to display the information from the model and controller that a user sees in his browser.

Types of Templates 
  1. Static Templates:

    A static template is defined by using script tag. It must have an id attribute with a unique value and a type attribute with value text/ng-template.

    As:
    1. <script type="text/ng-template" id="person.html">  
    2.     {{person.name}}: {{person. Address}}  
    3.     </script>  
    4.     Here  
    5.     <divng-include="'person.html'">  
    6.   </div>  
    Used for rendering.

  2. Dynamic Templates:

    A dynamic template is an html page which is compiled and rendered by Angular on demand.
    Ng-include use for rendering in dynamic template.

    Let’s start create project,

    1. Open old visual studio project
    2. Add new html file with name of Template.

    Template

    1. <!DOCTYPEhtml>  
    2. <html>  
    3.   
    4. <head>  
    5.     <title>Demo</title>  
    6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
    7.         </script>  
    8.         <script>  
    9.             var members = [  
    10.               {  
    11.                 username: 'Shiva',  
    12.                 address: 'Delhi'  
    13.             }, {  
    14.                 username: 'Rahul',  
    15.                 address: 'Mumbai'  
    16.             }, {  
    17.                 username: 'Kshma',  
    18.                 address: 'Mumbai'  
    19.             }, {  
    20.                 username: 'Ashita',  
    21.                 address: 'Varanasi'  
    22.             }];  
    23.             var app = angular.module('app', []);  
    24.             app.controller('MemberController', function($scope)   
    25.             {  
    26.                 $scope.Members = members;  
    27.             });  
    28.         </script>  
    29. </head>  
    30. <body ng-app="app">  
    31.     <p>AngularJS basic template</p>  
    32.     <h4>Listing item from the collection</h4>  
    33.   
    34.     <divng-controller="MemberController">  
    35.         <ul>  
    36.             <ling-repeat="member in Members">  
    37.                 {{$index + 1}}. Name: {{member.username }} | Address: {{ member.address}}  
    38.                 </li>  
    39.         </ul>  
    40.         </div>  
    41.   
    42.         </body>  
    43.   
    44. </html>  
Output

output


Similar Articles