Cách tạo một filter (custom Filter) trong AngularJS

Trong AngularJS mặc định cung cấp cho bạn một số filter có sẵn, nhưng trong một số trường hợp đặc biệt những filter này chưa đáp ứng đủ yêu cầu của bạn. AngularJS cho phép bạn mở rộng tạo thêm các filter phù hợp với yêu cầu của bạn. Bài viết này sẽ hướng dẫn bạn tạo một filter biến chữ hoa thành chữ thường và thay thế khoảng trắng trong chuỗi string.
Ta sẽ đặt tên cho filter này là customUpperCase và cũng sử dụng tương tự như những filter mặc định của AngularJS.

HTML:

<div ng-app="filterApp">
    <div ng-controller="filterController">
        <span>{{text|customUpperCase:'_'}}</span>
    </div>
</div>

Trong phần controller của AngularJS ta định nghĩa filter customUpperCase như sau:

Code (Javascript):

var app = angular.module('filterApp', []);
//Controller filter
app.controller('filterController', function($scope) {
    $scope.text = 'Đây là đoạn text mẫu!'
});
//định nghĩa filter biến chuỗi chữ thường thành chữ hoa và thay thế dấu khoảng trắng
app.filter('customUpperCase', function() {
    return function(input, separator) {
        return input.toUpperCase().replace(/\s+/g, separator);
    };
});

Chú giải:

1. Filter này có tên là customUpperCase có chức năng biến chuỗi thường thành chuỗi viết hoa, đồng thời tìm và thay thế khoảng trắng của chuỗi bằng giá trị mà người dùng truyền vào filter.
2. Để định nghĩa một filter mới ta phải truyền vào một hàm callback có nội dung trả về một hàm khác và nhận vào giá trị của đối tượng cần filter (input) và tham số truyền vào (separator).
3. Cách tạo filter của AngularJS cũng gần như tương tự cách tạo directive của nó.