Monday, 23 July 2018

AngularJS Filters With Examples

AngularJS Filters is used to format the data to display on UI without changing original format.
Filters can be added to expressions by using the pipe character | followed by a filter.
Syntax
{{expression|filterName:parameter}}

Angular includes various filters to format data of different data types. The following table lists important filters
  • lowercase Format a string to lower case.
  • number Format a number to a string.
  • orderBy Orders an array by an expression.
  • uppercase Format a string to upper case
  • 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.
  • limitTo Limits an array/string, into a specified number of elements/characters.
AngularJS number Filter
The number filter formats a number to a string.
Syntax:
{{ string | number : fractionsize}}
Where fractionsize  is a number, specifying the number of decimals

Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="nCtrl">
<h1>{{salary | number }} </h1>
<h1>{{salary | number : 2}} </h1>
<h1>{{salary | number : 3}} </h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('nCtrl', function($scope) {
    $scope.salary = 12000;
});
</script>
<p>The salary is written with  single ,two and three decimal point.</p>
</body>
</html>
Output:

12,000

12,000.00

12,000.000

The salary is written with single ,two and three decimal point.

AngularJS currency Filter

The currency filter formats a number value as a currency. When no currency symbol is provided, default symbol for current locale is used.
Syntax:
{{ number | currency : symbol : fractionsize }}
Where symbol is Optional. The currency symbol to be displayed. The symbol can be any character or text.
Where fractionsize is Optional. The number of decimals.

Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Price = {{ price | currency : "UK"}}</p>
<p>Price = {{ price | currency : "UK":3}}</p>
<p>Price = {{ price | currency : "UK" : 4}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.price =123.45;
});
</script>
</body>
</html>
Output:
Price = UK123.45
Price = UK123.450
Price = UK123.4500
AngularJS date Filter
Formats date to string based on the specified format.
The date filter formats a date to a specified format.
The date can be a date object, milliseconds, or a datetime .By default, the format is "MMM d, y" (dec 5, 2017).
Syntax
{{ date | date : format : timezone }}
Where timezone  is Optional. The timezone used to format the date.

Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date : "dd.MM.y" }}</p>
<p>Date = {{ today | date : "fullDate" }}</p>
<p>Date = {{ today | date : "'today is ' MMMM d, y" }}</p>
<p>Date = {{ "2017-12-05T09:05:05.035Z" | date }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
    $scope.today = new Date();
});
</script>
<p>You can write the date in many different formats.</p>
</body>
</html>

Output:
Date = 23.07.2018
Date = Monday, July 23, 2018
Date = today is July 23, 2018
Date = Dec 5, 2017
You can write the date in many different formats.

Uppercase/lowercase filter

The uppercase filter converts the string to upper case and lowercase filter converts the string to lower case.
Example:
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app >
<h1>AngularJS Uppercase/Lowercase Filter Demo: </h1>
    <div ng-init="person.firstName='Suryosnata';person.lastName='Behera'">
        Lower case: {{person.firstName + ' ' + person.lastName | lowercase}} <br />
        Upper case: {{person.firstName + ' ' + person.lastName | uppercase}}
    </div>
</body>
</html>
Output:
AngularJS Uppercase/Lowercase Filter Demo:
Lower case: suryosnata behera
Upper case: SURYOSNATA BEHERA

Example 2:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The last name is {{ lastName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Suryosnata",
    $scope.lastName = "Behera"
});
</script>
</body>
</html>
Output:
The last name is behera

filter

Filter selects items from an array based on the specified criteria and returns a new array.
Filters are added to directives, like ng-repeat, by using the pipe character | followed by a filter:
Syntax:
{{ expression | filter : filter_criteria }}

Example 1:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'a'">
    {{ x }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.names = [
        'sani',
        'bhagul',
        'surya',
        'saumya',
        'pritik',
        'hemant',
         'Mummy',
        'Kitti'
    ];
});
</script>
<p>This example displays only the names containing the letter "a".</p>
</body>
</html>
Output:
  • sani
  • bhagul
  • surya
  • saumya
  • hemant
This example displays only the names containing the letter "a".

Example 2:
<!doctype html>
<html lang="en-US">
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Search<input type="text" ng-model="test"></p>
<table border='1'>
                             <tr>
                                      <th>Book Name</th>
                             </tr>
                             <tr ng-repeat="x in bookname|filter:test">
                                      <td>{{x}}</td>
                             </tr>
                   </table>
          </div>
          <script>
                   var library=angular.module("myApp",[]);
                   library.controller("myCtrl",function($scope){
          $scope.bookname= ['Tom Jones','Madame Bovary','Pride and Prejudice','Wuthering Heights','War and Peace','The Brothers Karamazov'];
                   });
          </script>
</body>
</html>
Output:
Search
Book Name
Tom Jones
Madame Bovary
Pride and Prejudice
Wuthering Heights
War and Peace
The Brothers Karamazov

Example 3:

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>


<div ng-app="myApp" ng-controller="resultCtrl">


<p>Type a letter in the input field:</p>

 

<p><input type="text" ng-model="result"></p>

<ul>

  <li ng-repeat="x in names | filter:result">

    {{ x }}

  </li>

</ul>

</div>

<script>

angular.module('myApp', []).controller('resultCtrl', function($scope) {

    $scope.names = [

        'Janvi',

        'surya',

        'saumya',

        'omkar',

        'atul',

        'sipra',

        'mahali',

        'hemant',

        'sangeeta'

    ];

});

</script>

<p>The list will search of names matching the filter.</p>

</body>

</html>

Output:
Type a letter in the input field:
  • Janvi
  • surya
  • saumya
  • omkar
  • atul
  • sipra
  • mahali
  • hemant
  • sangeeta
The list will search of names matching the filter.


orderBy filter

The orderBy filter sorts an array based on specified expression predicate.
{{ expression | orderBy : predicate_expression : reverse}}
Example:
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<h1>AngularJS orderBy Filter Example: </h1>
    <div ng-controller="myController">
        <select ng-model="SortOrder">
            <option value="+name">Name (asc)</option>
            <option value="-name">Name (dec)</option>
            <option value="+phone">Phone (asc)</option>
            <option value="-phone">Phone (dec)</option>
        </select>
        <ul ng-repeat="person in persons | orderBy:SortOrder">
            <li>{{person.name}} - {{person.phone}}</li>
        </ul>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
       
        myApp.controller("myController", function ($scope) {
       
            $scope.persons = [{ name: 'BHAGU', phone: '8756789067' },
                         { name: 'DPK', phone: '9230678989' },
                         { name: 'JOHN', phone: '7789706778' },
                         { name: 'SAUMYA', phone: '5674567809' },
                         { name: 'OMKAR', phone: '1905678945' },
                         { name: 'SURYA', phone: '4007678899' }]
           
            $scope.SortOrder = '+name';
        });
    </script>
</body>
</html>
Output:

AngularJS orderBy Filter Example:

    
  • BHAGU - 8756789067
  • DPK - 9230678989
  • JOHN - 7789706778
  • OMKAR - 1905678945
  • SAUMYA - 5674567809
  • SURYA - 4007678899

AngularJS json Filter

It is used to display a JavaScript object as a JSON string
The json filter converts a JavaScript object into a JSON string.
This filter can be useful when debugging your applications.
The JavaScript object can be any kind of JavaScript object.
Syntax:
{{Object|json:spacing}}
Where spacing is Optional. A number specifying how many spaces to user per indentation. The default value is 2
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="mjsCtrl">

<h1>Client:</h1>

<pre>{{client | json }}</pre>
<pre>{{client | json :4}}</pre>
<pre>{{client | json :10}}</pre>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('mjsCtrl', function($scope) {
    $scope.client = {
        "name" : "suryosnata",
        "city" : "bbsr",
        "country" : "india"
    };
});
</script>

<p>A JSON string with different spaces per indentation.</p>

</body>
</html>
Output:

Client:

{
  "name": "suryosnata",
  "city": "bbsr",
  "country": "india"
}
{
    "name": "suryosnata",
    "city": "bbsr",
    "country": "india"
}
{
          "name": "suryosnata",
          "city": "bbsr",
          "country": "india"
}
A JSON string with different spaces per indentation.

AngularJS limitTo Filter

The limitTo filter returns an array or a string containing only a specified number of elements.
When the limitTo filter is used for arrays, it returns an array containing only the specified number of items.
When the limitTo filter is used for strings, it returns a string containing, only the specified number of characters.
When the limitTo filter is used for numbers, it returns a string containing only the specified number of digits.
Use negative numbers to return elements starting from the end of the element, instead of the beginning.
Syntax:
{{object|limitTo:limit:begin}}

Where limit is a number, specifying how many elements to return .
Where begin is Optional. A number specifying where to begin the limitation. Default is 0.
Example:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in fruits | limitTo : -3">{{x}}</li>
</ul>

<ul>
<li ng-repeat="x in fruits | limitTo : +3">{{x}}</li>
</ul>
<ul>
<li ng-repeat="x in fruits| limitTo : 3 : 1">{{x}}</li>
</ul>
<ul>
<li ng-repeat="x in fruits| limitTo : 3 : 2">{{x}}</li>
</ul>
<ul>
<li ng-repeat="x in fruits| limitTo : -3 : 2">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.fruits = ["Apple", "orange", "manago", "guava", "pineapple", "banana"];
});
</script>
</body>
</html>
Output:
  • guava
  • pineapple
  • banana
  • Apple
  • orange
  • manago
  • orange
  • manago
  • guava
  • manago
  • guava
  • pineapple
  • Apple
  • orange
Example 2:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{txt | limitTo }}</h1>
<h1>{{txt | limitTo : 2}}</h1>
<h1>{{txt | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.txt = "Hello welcome to LearningPoint92";
});
</script>
</body>
</html>
Output:

Hello welcome to LearningPoint92

He

Hel



at

1 comment:

  1. Rekha Roy18 October 2021 at 08:54

    Python is an open-source, high level, interpreted programming language which offers great opportunities for object-oriented programming. Choosing a python training program from Red Prism Group, which is best training institute for python in noida.

    ReplyDelete

Subscribe to: Post Comments (Atom)

apply function in R

1) apply function: It takes 3 arguments matrix,margin and function.. Example: m<-matrix(c(1,2,3,4),nrow=2,ncol=2) m #1 indicates it is ap...