In this article, I’m explaining about the filters in angularjs and how to use it.
Let create an angularjs app named “myApp” and create a controller named “myController” in it:
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>AngularJs Example</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<h2>AngularJs Filter Example</h2>
<divng-app="myApp">
<divng-controller="myController">
</div>
</div>
</body>
</html>
Now in the controller add a textbox with model and bind its data to span like this:
<divng-controller="myController">
<inputtype="text"ng-model="data.Message"/>
<br/>
<br/>
<span>{{ data.Message }}</span>
</div>
Now define the app and controller in the <script> tag like this:
<script>
var myApp = angular.module('myApp', []);
function myController($scope) {
$scope.data = {
Message : ""
};
}
</script>
Output
Now we write a method inside the controller to the reverse the value of the textbox like this:
function myController($scope) {
$scope.data = {
Message : ""
};
$scope.reversedMessage = function (message) {
return message.split("").reverse().join("");
};
}
And in the <div>
<divng-controller="myController">
<inputtype="text"ng-model="data.Message"/>
<br/>
<br/>
<span>{{ data.Message }}</span>
<br/>
<br/>
<span>{{ reversedMessage(data.Message) }}</span>
</div>
Output
Now the above reverseMessage method is only available inside the myController and we can only use it inside the myController controller, if we want to try to use it outside the controller then it will the give the error and do we have to create a filter and we define the reverse functionality inside that filter, Once filter is created you can use in whole angularjs app.
Now define a filter in the <script> tag like this:
myApp.filter('reverse', function () {
returnfunction (text) {
return text.split("").reverse().join("");
}
});
And we use the filter using pipe(|) sign like this:
<span>{{ data.Message | reverse}}</span>
Full code of filter:
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>AngularJs Example</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<h2>AngularJs Filter Example</h2>
<divng-app="myApp">
<divng-controller="myController">
<inputtype="text"ng-model="data.Message"/>
<br/>
<br/>
<span>{{ data.Message }}</span>
<br/>
<br/>
<span>{{ reversedMessage(data.Message) }}</span>
<br/>
<br/>
<span>{{ data.Message | reverse}}</span>
</div>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.filter('reverse', function () {
returnfunction (text) {
return text.split("").reverse().join("");
}
});
function myController($scope) {
$scope.data = {
Message : ""
};
$scope.reversedMessage = function (message) {
return message.split("").reverse().join("");
};
}
</script>
Output
Leave Comment