CodeChef4U

Code recipes with master chefs.

Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

AngularJS Date Filter

4. May 2016 Nagnath M. Kendre Tutorials, AngularJS (0)

Date Filter

Date filter formats date to a string based on the requested format.

The date can be a date object, milliseconds, or a date time string like "1985-04-05 12:08:15.773"

Syntax:

{{ date | date : date format : timezone }

Parameter Value

Description

Format

'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')

 

Date formats filter supports following predefined string formats also

 

 a. medium: equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)

 

 b. short: equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)

 

 c. fullDate: equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)

 

 d. longDate: equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)

 

 e. mediumDate: equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)

 

 f. shortDate: equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)

 

 g. mediumTime: equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)

 

 h. shortTime: equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)

timezone

This is optional parameter, used to format the date.

 

Example

<body>
    <div ng-app="mydateApp" ng-controller="EmplDeatilController">
      
        User Name:{{Employee.userName }}
        <br />
        <!--date filter predefined format -->
        Birth Date:{{Employee.BirthDate | date:'medium' }}
 
        <br />
        <!--date filter with specific year -->
        Birth year:{{Employee.BirthDate | date:'y' }}
 
        <br />
        <!--date filter with specific month -->
        Birth Month:{{Employee.BirthDate | date:'MMMM' }}
 
        <br />
        <!--date filter with specific time (hours) -->
        Birth Time:{{Employee.BirthDate | date:'h' }}
 
    </div>
    <script>
        var app = angular.module('mydateApp', []);
        var dateOut = new Date('1985-04-05 12:08:15.773');
        app.controller('EmplDeatilController', ['$scope', function ($scope) {
            $scope.Employee = {
                userName: 'sKendre;',
                name: 'Shourya Kendre',
                BirthDate: dateOut
 
            };
        }]);
    </script>
</body>

 धन्यवाद मित्रानो ... 

AngularJS Custom Filters

27. April 2016 Nagnath M. Kendre Tutorials, AngularJS (0)

In last two posts AngularJS filter and AngularJS stateful filter I explained in details AngularJS filters with example, in this post I will explain how to create your own custom filter.

Custom Filters

Creating custom filters are quite easy in AngularJS, you require following some easy steps.

1.    Register a new filter factory function with your module. Internally, this uses the filterProvider.

2.    This factory function should return a new filter function which takes the input value as the first argument.

3.    Any filter arguments are passed in as additional arguments to the filter function.

4.    The filter functions should be pure function, means this functions is stateless and idempotent.

 

Example:

<body>
    <div ng-app="MyFirstCustomApp" ng-controller="MyController">
  <input ng-model="WelcomeMsg" type="text"><br>
  No filter: {{WelcomeMsg}}<br>
  Reverse: {{WelcomeMsg|reverse}}<br>
  Reverse & Result in uppercase: {{WelcomeMsg|reverse:true}}<br>
  Reverse, filtered in controller: {{filteredWelcomeMsg}}<br>
</div> 
</body>

 

<script>
    var app = angular.module('MyFirstCustomApp', []);
app.filter('reverse', function() {
  return function(input, uppercase) {
    input = input || '';
    var out = "";
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }
    // conditional based on optional argument
    if (uppercase) {
      out = out.toUpperCase();
    }
    return out;
  };
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
    $scope.WelcomeMsg = 'Welcome to CodeChef4u';
    $scope.filteredWelcomeMsg = reverseFilter($scope.WelcomeMsg);
}]);
 </script>

 

AngularJS Stateful Filter

17. April 2016 Nagnath M. Kendre Tutorials, AngularJS (1)

In previous AngularJS Filter post I explained in details what are AngularJS filters with example, in this post I will explain stateful filter with sample example.

State

State is input values, properties, parameters that are set throughout application.

Stateful Filter

To crate state full filter you have to mark the filter as $stateful, which means that it will be executed one or more times during the each $digest cycle.

Syntax

myFilterFunc.$stateful = true;

Problem with stateful filters

In AngularJS developer document it is suggested avoid writing stateful filters, because the execution of those can't be optimized by Angular, which often leads to performance issues.

With statefull filter if we are not using any filter input parameter in that case Internal hidden state changes every time and due to that filter executing one or more times during the each $digest cycle and  that causes performance issues.

Corrections in Angular 1.3+

Filters in Angular 1.3 have been updated with some filter corrections and now filters are stateless by default.

 i.e. with current filter change result depends only on the input parameters and not on any kind of internal state. If input to filter is not changed then result is same again.

Whenever angular detects input value/parameter is changed then only it invoke a (stateless) filter not in every $digest cycle.

StateFul Filter Example:

<body ng-ap="myStatefulFilterApp" ng-controller="MyController">
    <div>
  Input: <input ng-model="WelcomeMessage"><br>
  Decoration: <input ng-model="decoration.symbol"><br>
  No filter: {{WelcomeMessage}}<br>
  Decorated: {{WelcomeMessage | decorate}}<br>
</div>
 
</body>
     <script>
         angular.module('myStatefulFilterApp', [])
         .filter('decorate', ['decoration', function (decoration) {
             function decorateFilter(input) {
                 return decoration.symbol + input + decoration.symbol;
             }
             decorateFilter.$stateful = true;
             return decorateFilter;
         }])
         .controller('MyController', ['$scope', 'decoration', function ($scope, decoration) {
             $scope.WelcomeMessage = 'Welcome to codechef4u.com';
             $scope.decoration = decoration;
         }])
         .value('decoration', { symbol: '*' });
    </script>