AngularJS / AngularJS Filters

AngularJS Filters are used to format data in AngularJS.

Format1	Converts to Format2
String	to upper case
String	lower case
Current Format	Target format
number	currency format
date	specified format
number	to string
object	JSON string
Limits an array/string	Limits the number of characters.
Orders array	array

Uppercase Filter in Angularjs

Program Name

Write a Program for AngularJS Uppercase Filter .

Theory
AngularJS Filters are used to format data to Uppercase Filter in Angularjs.

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<h1>Uppercase  Filter in Angularjs</h1>

<div ng-app="app9" ng-controller="Organization">
Organization Name to  uppercase = {{ OrganizationName | uppercase }}
</div>

<script>
    angular.module('app9', []).controller('Organization', function ($scope) {
        $scope.OrganizationName = "wisdom materials"
    });
</script>

Input

wisdom materials

Output

Uppercase  Filter in Angularjs
Organization Name to  uppercase = WISDOM MATERIALS

Lowercase Filter in Angularjs

Program Name

Write a Program for AngularJS Lowercase Filter .

Theory
AngularJS Filters are used to format data to Lowercase Filter in Angularjs.

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<h1>Lowercase   Filter in Angularjs</h1>

<div ng-app="app9" ng-controller="Organization">
Organization Name to  lowercase  = {{ OrganizationName | lowercase  }}
</div>

<script>
    angular.module('app9', []).controller('Organization', function ($scope) {
        $scope.OrganizationName = "WISDOM MATERIALS"
    });
</script>

Input

WISDOM MATERIALS

Output

Lowercase  Filter in Angularjs
Organization Name to  Lowercase = wisdom materials

Currency Filter in Angularjs

Program Name

Write a Program for AngularJS Currency Filter .

Theory
AngularJS Currency Filters are used to format data to Currency in Angularjs.

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<h1>Currency Filter in Angularjs</h1>

<div ng-app="App99" ng-controller="costfilter">
<h1>Price: {{ price | currency }}</h1>
</div>

<script>
    var app9 = angular.module('App99', []);
    app9.controller('costfilter', function ($scope) {
        $scope.price = 99;
    });
</script>

Input

Output

Currency Filter in Angularjs
Price: $99.00

User Input based Array Sort

Program Name

Write a Program for AngularJS User Input based Array Sort Filter .

Theory
AngularJS User Input based Array Sort Filters are used to format data to in Angularjs.

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<h1>User Input based Array Sort </h1>

<div ng-app="app9" ng-controller="namesCtrl">
Type a character in the text box:<br />
<input type="text" ng-model="arrayinputfilter"><br />
<ul><li ng-repeat="abcd1234 in wordslist9 | filter:arrayinputfilter">{{ abcd1234 }}</li></ul>
</div>

<script>
    angular.module('app9', []).controller('namesCtrl', function ($scope) {
        $scope.wordslist9 = ['wisdom', 'materials', 'company', 'organization', 'software'];
    });
</script>

Input

Array = wordslist9

Output
User Input based Array Sort filter Angularjs

Home Back