<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS - Built-in and Custom Filters</title>
</head>
<body>
<div ng-controller="filterController">
<p>Capitalized: {{name | uppercase}}</p>
<p>Lowercase: {{name | lowercase}}</p>
<p>Leet (Custom Filter): {{name | leet}}</p>
<p>
Restrict the user's list: <br />
<input type="text" ng-model="searchquery" />
</p>
<ul>
<li ng-repeat="person in people | filter:searchquery">{{person}}</li>
</ul>
<p>Output today default: {{today}}</p>
<p>Output today with date filter: {{today | date}}</p>
<p>Output today with date filter and more: {{today | date:'short'}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("filterController", function($scope){
$scope.name = "david manske";
$scope.people = ["david", "julianna", "bubba"];
$scope.today = new Date();
});
app.filter("leet", function(){
return function(text) {
return text.split('e').join('3')
.split('E').join('3')
.split('a').join('@')
.split('A').join('@')
.split('t').join('7')
.split('t').join('7')
.split('T').join('7');
};
});
</script>
</body>
</html>
output:
<html ng-app="myapp">
<head>
<title>AngularJS - Built-in and Custom Filters</title>
</head>
<body>
<div ng-controller="filterController">
<p>Capitalized: {{name | uppercase}}</p>
<p>Lowercase: {{name | lowercase}}</p>
<p>Leet (Custom Filter): {{name | leet}}</p>
<p>
Restrict the user's list: <br />
<input type="text" ng-model="searchquery" />
</p>
<ul>
<li ng-repeat="person in people | filter:searchquery">{{person}}</li>
</ul>
<p>Output today default: {{today}}</p>
<p>Output today with date filter: {{today | date}}</p>
<p>Output today with date filter and more: {{today | date:'short'}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("filterController", function($scope){
$scope.name = "david manske";
$scope.people = ["david", "julianna", "bubba"];
$scope.today = new Date();
});
app.filter("leet", function(){
return function(text) {
return text.split('e').join('3')
.split('E').join('3')
.split('a').join('@')
.split('A').join('@')
.split('t').join('7')
.split('t').join('7')
.split('T').join('7');
};
});
</script>
</body>
</html>
output:
Capitalized: DAVID MANSKE
Lowercase: david manske
Leet (Custom Filter): d@vid m@nsk3
Restrict the user's list: - david
- julianna
- bubba
Output today default: "2014-05-05T07:48:47.195Z"
Output today with date filter: May 5, 2014
Output today with date filter and more: 5/5/14 2:48 AM
No comments:
Post a Comment