AngularJS Filetrs


In Angular filters are nothing but transforming a value to specic

  • 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.
  • 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.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<body>

		<div ng-app="myApp" ng-controller="myCtrl">
			<p>The name is: {{ lastName | uppercase }},{{ lastName | lowercase }} </p>
			<p>Monthly Expenses: {{ expense | currency }}</p>
			<p>Dat of Birth:{{ "1985-01-05T09:05:05.035Z" | date }}</p>
			<!--Return the names that contains the letter "i": -->
			<p> My Friends::<li ng-repeat="x in names| filter : 'i'">
				{{ x }}
			</li></p>
	<p> My Websites: <pre>{{websites | json}}</pre></p>
	<p> Friends by Country::
			<!-- The orderBy filter sorts an array based on country -->
			<ul>
				<li ng-repeat="x in names | orderBy:'country'">
					{{ x.name + ', ' + x.country }}
				</li>
			</ul></p>
			<!-- The orderBy filter sorts an array based on country -->
<p> Close Friends any two::
			<ul>
				<li ng-repeat="x in names | limitTo:2">
					{{ x.name + ', ' + x.country }}
				</li>
			</ul></p>
			<p>Todays's Date = {{ today | date :  "dd.MM.y" }}</p>
			<p>Dal current Price::{{cost | number : 2}} kg</p>
		</div>

		<script>
			var app = angular.module('myApp', []);
			app.controller('myCtrl', function($scope) {
				$scope.firstName= "Soha";
				$scope.lastName= "sk";
				$scope.expense= "12000";
				$scope.lastName= "sk";	
				$scope.names=[
					{name:'Jani',country:'Norway'},
					{name:'Hege',country:'Sweden'},
					{name:'Kai',country:'Denmark'}];
				$scope.today = new Date();
				$scope.websites = [{
					"name" : "javavillage",
					"url" : "www.javavillage.in",
					"techo":"java"
					
					},{"name" : "datastapler",
					"url" : "www.javavillage.in",
					"techo":"java"}];
				$scope.cost = 120;
			});
		</script>

	</body>
</html>
Excution page:

AngularJs Filters