This page demonstrate the custom filter, titlecase that was created to change the content to Title Case (first letter of each word is converted to capital case). Refer to notes section and code samples to understand key aspects required to create a custom filter. Refer AngularJS page on filters to understand about filters and how to create custom filter.

{{name|titlecase}}

Notes

Custom Filter Code Example
			
<!DOCTYPE html>

<html ng-app="HelloApp">
<head>
<title></title>
</head>
<body ng-controller="HelloCtrl">
<form>
<input type="text" ng-model="name"/>
</form>
<div>{\{name|titlecase}}</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
// Code defining custom module consisting of a filter
// The module needs to be included as dependency for using the filter, titlecase
//
angular.module('CustomFilterModule', [])
.filter( 'titlecase', function() {
return function( input ) {
return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
});
// Angular App on this page
// Included CustomFilterModule as dependency
//
angular.module('HelloApp', [ 'CustomFilterModule'])
.controller('HelloCtrl', ['$scope', function($scope){
$scope.name = '';
}])
</script>
</body>
</html>
comments powered by Disqus