Knowledge Management Banner

Knowledge Management Banner

format filter in angularjs

It is used to format in angularjs

Html Code

 <script src="angular.1.4.8.min.js"></script>  
 <div ng-app="MyApp">  
   <div ng-controller="MyController">  
     <style type="text/css">  
       table, td, th {  
         border-collapse: collapse;  
         border: 1px solid red;  
         padding: 5px;  
         font-family: Calibri;  
       }  
     </style>  
     <h1>{{Title}}</h1>  
     <hr />  
     Rows : <input type="number" step="1" min="0" max="6" ng-model="MaxRow" /><br /><br />  
     <table id="DemoTable">  
       <tr>  
         <th>First Name</th>  
         <th>Last Name</th>  
         <th>Gender</th>  
         <th>Age</th>  
         <th>Salary</th>  
         <th>RegDate</th>  
       </tr>  
       <tr ng-repeat="x in DetailArray | limitTo:MaxRow">  
         <td>{{x.Name | lowercase}}</td>  
         <td>{{x.LastName | uppercase}}</td>  
         <td>{{x.Gender}}</td>  
         <td>{{x.Age | number:2}}</td>  
         <td>{{x.Salary | currency:"₹ ":1}}</td>  
         <td>{{x.RegDate | date:"yyyy/M/dd"}}</td>  
       </tr>  
     </table>  
   </div>  
 </div>  
 <script src="index.js"></script>  

AngularJS Code

 /// <reference path="angular.1.4.8.min.js" />  
 var ngapp = angular.module("MyApp", []);  
 ngapp.controller("MyController", function ($scope) {  
   $scope.Title = "DATA FORMAT FILTER";  
   var TempArray = [{ Name: "John", LastName: "Doe", Gender: "Male", Age: 45, Salary : "45210.265", RegDate: new Date("October 10 1987") },  
           { Name: "Jennifer", LastName: "Dolle", Gender: "Female", Age: 12, Salary: "12000", RegDate: new Date("January 13 2010") },  
           { Name: "Theon", LastName: "GreyJoy", Gender: "Male", Age: 32, Salary: "45628.321", RegDate: new Date("March 20 2011") },  
           { Name: "Cersei", LastName: "Lannistor", Gender: "Female", Age: 15, Salary: "500", RegDate: new Date("April 23 2006") },  
           { Name: "Rohini", LastName: "Devikar", Gender: "Female", Age: 20, Salary: "78000", RegDate: new Date("July 29 2005") },  
           { Name: "Amit", LastName: "Shah", Gender: "Male", Age: 57, Salary: "106000", RegDate: new Date("December 5 1978") },  
           { Name: "Narendra", LastName: "Modi", Gender: "Male", Age: 64, Salary: "1", RegDate: new Date("September 9 2015") }];  
   $scope.DetailArray = TempArray;  
   $scope.MaxRow = 3;  
 });  


Formats date to a string based on the requested format.
format string can be composed of the following elements:
  • 'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
  • 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
  • 'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
  • 'MMMM': Month in year (January-December)
  • 'MMM': Month in year (Jan-Dec)
  • 'MM': Month in year, padded (01-12)
  • 'M': Month in year (1-12)
  • 'LLLL': Stand-alone month in year (January-December)
  • 'dd': Day in month, padded (01-31)
  • 'd': Day in month (1-31)
  • 'EEEE': Day in Week,(Sunday-Saturday)
  • 'EEE': Day in Week, (Sun-Sat)
  • 'HH': Hour in day, padded (00-23)
  • 'H': Hour in day (0-23)
  • 'hh': Hour in AM/PM, padded (01-12)
  • 'h': Hour in AM/PM, (1-12)
  • 'mm': Minute in hour, padded (00-59)
  • 'm': Minute in hour (0-59)
  • 'ss': Second in minute, padded (00-59)
  • 's': Second in minute (0-59)
  • 'sss': Millisecond in second, padded (000-999)
  • 'a': AM/PM marker
  • 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
  • 'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
  • 'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year
  • 'G''GG''GGG': The abbreviated form of the era string (e.g. 'AD')
  • 'GGGG': The long form of the era string (e.g. 'Anno Domini')
    format string can also be one of the following predefined localizable formats:
  • 'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)
  • 'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)
  • 'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)
  • 'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)
  • 'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
  • 'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
  • 'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)
  • 'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)

Reference - https://docs.angularjs.org/api/ng/filter/date

No comments

Powered by Blogger.