LearnKode

3 Example(s) of AngularJS $filter


Description :

$filter is a service used to format the expression. In this example, we need to inject controller with $filter service. We are assigning learnkode to originalText variable and the $filter('uppercase')($scope.originalText) will convert learnKode to uppercase. $scope.originalText = 'learnkode'; $scope.filteredText = $filter('uppercase')($scope.originalText); See the code snippet:


AngularJS $filter Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <h3>{{ originalText }}</h3>
        <h3>{{ filteredText }}</h3>
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', '$filter', function ($scope, $filter) {
        $scope.originalText = 'learnkode';
        $scope.filteredText = $filter('uppercase')($scope.originalText);
    }]);
</script>
Try it » Download Example »

Output

Description :

$filter('lowercase') will convert "LEARNKODE" to lowercase. See the code snippet for $filter('lowercase'):


AngularJS $filter Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <h3>{{ originalText }}</h3>
        <h3>{{ filteredText }}</h3>
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', '$filter', function ($scope, $filter) {
        $scope.originalText = 'LEARNKODE';
        $scope.filteredText = $filter('lowercase')($scope.originalText);
    }]);
</script>
Try it » Download Example »

Output

Description :

$filter('filter') will filter out the records as per the input value in the textbox. We have 5 values in items as: $scope.items = [ { id: 1, name: 'ABC' }, { id: 2, name: 'DEF' }, { id: 3, name: 'GHI' }, { id: 4, name: 'Jkl' }, { id: 5, name: 'ABCD' }]; so once user enter "A" it will result two records "ABC" and "ABCD" as ouput. See code snippet:


AngularJS $filter Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
       Name: <input type="text" ng-model="search">
        <table>
            <tbody>
                <tr ng-repeat="item in items">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', '$filter', function ($scope, $filter) {
        $scope.items = [
            { id: 1, name: 'ABC' },
            { id: 2, name: 'DEF' },
            { id: 3, name: 'GHI' },
            { id: 4, name: 'Jkl' },
            { id: 5, name: 'ABCD' }];

        $scope.items2 = $scope.items;

        $scope.$watch('search', function (val) {
            $scope.items = $filter('filter')($scope.items2, val);
        });
    }]);
</script>
Try it » Download Example »

Output