Angular

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs