Hi rani,
There are two approach to change statement to Title Case.
- Using AngularJS filter.
- Using CSS text-transform Property.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title Case</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Statement = "The quick brown fox jumps over the lazy dog";
});
app.filter('titleCase', function () {
return function (input) {
input = input || '';
return input.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
};
})
</script>
<div ng-app="MyApp" ng-controller="MyController">
<h3>1. Using AngularJS filter</h3>
<span>{{ Statement | titleCase }}</span><br />
<h3>2. Using CSS text-transform Property</h3>
First change the statement to lowercase and text-transform property will transforms the first character of each word to uppercase.
<br /><br />
<span style="text-transform: capitalize;">{{ Statement.toLowerCase() }}</span>
</div>
</body>
</html>
Demo
For more details on CSS text-transform Property refer below link.
CSS text-transform Property
