Home > DeveloperSection > Beginner > AngularJs Filters

AngularJs Filters


Angular JS Angular JS  Angularjs Directive  Angularjs Filter  Angularjs Model 
Ratings:
0 Comment(s)
 1370  View(s)
Rate this:

AngularJs Filters

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:

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Example</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

 

<body>

    <h2>AngularJs Filter Example</h2>

<div ng-app="myApp">

        <div ng-controller="myController">

</div>

    </div>

</body>

</html>

Now in the controller add a textbox with model and bind its data to span like this:

<div ng-controller="myController">

            <input type="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

3.jpg

 

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>

<div ng-controller="myController">

            <input type="text" ng-model="data.Message"/>

            <br />

            <br />

            <span>{{ data.Message }}</span>

            <br />

            <br />

             <span>{{ reversedMessage(data.Message) }}</span>

        </div>

Output

4.jpg

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 () {

        return function (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:

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJs Example</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

 

<body>

    <h2>AngularJs Filter Example</h2>

<div ng-app="myApp">

        <div ng-controller="myController">

            <input type="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 () {

        return function (text) {

            return text.split("").reverse().join("");

        }

    });

 

 

    function myController($scope) {

        $scope.data = {

            Message : ""

        };

 

        $scope.reversedMessage = function (message) {

            return message.split("").reverse().join("");

        };

 

    }

</script>

 

Output

5.jpg


Don't want to miss updates? Please click the below button!

Follow MindStick