이번에는 filter를 다루어 보도록 하겠습니다.

우선 public/javascripts/main.js 를 아래와 같이 수정합니다.
var firstApp = angular.module('FirstApp', []);
firstApp.factory('Data', function() {
        return {message: "I'm data from a service"}
});
firstApp.filter('reverse', function() {
        return function (text) {
                return text.split("").reverse().join("");
        }
});
firstApp.controller('FirstCtrl', function($scope, Data) {
        $scope.data = Data;
});
firstApp.controller('SecondCtrl', function($scope, Data) {
        $scope.data = Data;

        $scope.reversedMessage = function (message) {
                return message.split("").reverse().join("");
        };
});


public/index.html 도 아래와 같이 수정합니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
<div ng-app="FirstApp">
        <div ng-controller="FirstCtrl">
                <input type="text" ng-model="data.message">
                <h1>{{data.message}}</h1>
        </div>
        <div ng-controller="SecondCtrl">
                <input type="text" ng-model="data.message">
                <h1>{{data.message|reverse}}</h1>
        </div>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


브라우저를 열어서 확인하면 지난번과 동일하게 아래 것만 거꾸로 출력이 되는 것을 알 수 있습니다.


이 예제는 매우 단순하게 구성이 되어있으나, filter는 다양한 용도로 사용이 됩니다.

보통 검색할 때 전체 데이터셋을 가지고 있으면서 실시간으로 매칭 되는것을 보여줄 때도 사용을 많이 합니다.

이 게시물을...