AngularJS Advanced Filter
JSON filter
The JSON filter convert a JavaScript object into JSON string. This filter is mostly used for debugging.
JSON Filter takes two arguments ,object and spacing. object is here JavaScript object.spacing denote spaces to use per indentation , by default 2.
Example
limitTo filter
When you are looping throught , ng-repeat , you can limit , number of repeat.limitTo limits an array/string, into a specified number of elements/characters.
Example
Output:
date filter
Format date to a specific format.For example
1.M/d/yy h:mm a
2.MMM d, y h:mm:ss a
3.M/d/yy
4.MMM d, y
5.MMMM d, y
6.EEEE, MMMM d, y
7.h:mm a
8.h:mm:ss a
Example
JSON filter
The JSON filter convert a JavaScript object into JSON string. This filter is mostly used for debugging.
JSON Filter takes two arguments ,object and spacing. object is here JavaScript object.spacing denote spaces to use per indentation , by default 2.
Example
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myController",
function
($scope)
{
$scope.JsonData
=
{
"name":
"Ayan
Banerjee",
"Age":
"21",
"Address":
"Germany"
};
$scope.JsonArray
= ['User
1',
'User
2',
'User
3'];
});
</script>
<div
style="background-color:
#F0F0F0; width:
400px;">
<div
ng-app="myApp">
<div
ng-controller="myController">
<fieldset>
<legend><b>1.Example
: Fileter Json Data</b></legend><span>{{JsonData|json
:3}}</span>
</fieldset>
<fieldset>
<legend><b>2.Example
: Fileter Json Array</b></legend><span>{{JsonArray|json
:3}}</span>
</fieldset>
</div>
</div>
Ouput :
limitTo filter
When you are looping throught , ng-repeat , you can limit , number of repeat.limitTo limits an array/string, into a specified number of elements/characters.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myController",
function
($scope)
{
$scope.limitToArry
= ["India",
"USA",
"Brazil",
"China",
"Russia",
"Germanay"];
$scope.today
= new
Date();
});
</script>
<div
style="background-color:
#F0F0F0; width:
400px;">
<div
ng-app="myApp">
<div
ng-controller="myController">
<fieldset>
<legend><b>3.Example
: Fileter limitTo </b></legend>
<li
ng-repeat="obj
in limitToArry | limitTo : 3">{{obj}}</li>
</fieldset>
</div>
</div>
Output:
date filter
Format date to a specific format.For example
1.M/d/yy h:mm a
2.MMM d, y h:mm:ss a
3.M/d/yy
4.MMM d, y
5.MMMM d, y
6.EEEE, MMMM d, y
7.h:mm a
8.h:mm:ss a
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myController",
function
($scope)
{
$scope.today
= new
Date();
$scope.dateFormat
=
[
{
id: 1, name: 'M/d/yy
h:mm a'
},
{
id: 2, name: 'MMM
d, y h:mm:ss a'
},
{
id: 3, name: 'M/d/yy'
},
{
id: 3, name: 'MMM
d, y'
},
{
id: 3, name: 'MMMM
d, y'
},
{
id: 3, name: 'EEEE,
MMMM d, y'
},
{
id: 3, name: 'h:mm
a'
},
{
id: 3, name: 'h:mm:ss
a'
},
];
$scope.Format
= function
()
{
$scope.format
= $scope.selectedItem.name;
};
});
</script>
<div
style="background-color:
#F0F0F0; width:
400px;">
<div
ng-app="myApp">
<div
ng-controller="myController">
<fieldset>
<legend><b>4.Example
: Fileter Date</b></legend>
<table>
<tr>
<td>
Select
Date Format :
</td>
<td>
<select
ng-model="selectedItem"
ng-options="dateFormat
as dateFormat.name for dateFormat in dateFormat"
ng-change="Format()">
</select>
</td>
</tr>
<tr>
<td
colspan="2">
Date
= {{ today | date : format }}
</td>
</tr>
</table>
</fieldset>
</div>
</div>
Ouput :
No comments:
Post a Comment