Tìm Hiểu AngularJS - Filters (P4)

Bài đăng này đã không được cập nhật trong 8 năm

Filters là bộ lọc định dạng các giá trị của biểu thức để hiển thị cho người sử dụng. Ta có thể dùng chúng trong templates, controllers, services hay định nghĩa riêng custom filters của bạn một cách dễ dàng.

I. Các Filters mặc định trong AngularJS

1. Cú pháp

Đối với expression, Filter có định dạng kiểu luồng dẫn (pipe), với cú pháp cơ bản như sau:

{{ expression | filter }}

Hay nhiều Filter trong biểu thức:

{{ expression | filter1 | filter2 | filter3 }}

Hoặc với đối số:

{{ expression | filter:argument1:argument2:.. }}

2. Một số filter mặc định

uppercase: chuyển đổi chuỗi thành chuỗi hoa.
lowercase: chuyển đổi chuỗi thành chuỗi thường.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf8">
        <title>AngularJS Filter</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.name = "John";
            });
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            Name (uppercase): {{ name | uppercase }}
            <br>
            Name (lowercase): {{ name | lowercase }}
        </div>
    </body>
</html>

kết quả ta thu được:

Name (uppercase): JOHN

Name (lowercase): john

Xem demo ví dụ này.

orderBy: sắp xếp phần tử trong mảng. Ở ví dụ dưới đây, mảng students sẽ được sắp xếp lại theo address:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf8">
        <title>AngularJS Filter OrderBy</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.students = [
                {name:'Lien',address:'Ha Noi'},
                {name:'Linh',address:'Can Tho'},
                {name:'Thu',address:'Da Nang'},
                ];
            });
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <p>Looping with objects:</p>
            <ul>
                <li ng-repeat="x in students | orderBy:'address'">
                    {{ x.name + ', ' + x.address }}
                </li>
            </ul>
        </div>
    </body>
</html>

kết quả ta thu được:

Looping with objects:

Linh, Can Tho

Thu, Da Nang

Lien, Ha Noi

Xem demo ví dụ này.

number: làm tròn số, xét kích thước phần thập phân

<title>AngularJS Filter Number</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope){
          $scope.defaultNumber = 50;
          $scope.defaultNumberDecimals = 50.458;
        });
</script>
<body>
        <div ng-app="myApp" ng-controller="myCtrl">
            Default Number Filter:
            {{ defaultNumber | number }}
            <br>
            Number to Four Decimal Places:
            {{ defaultNumber | number:4 }}
            <br>
            Round Number to Two Decimal Places:
            {{ defaultNumberDecimals | number:2 }}
        </div>
</body>

kết quả ta thu được:

Default Number Filter: 50

Number to Four Decimal Places: 50.0000 // độ dài phần thập phân là 4

Round Number to Two Decimal Places: 50.46 //làm tròn đến số thập phân thứ 2

Xem demo ví dụ này.

currency: là filter định dang tiền tệ, theo mặc định không có tham số nào kèm theo thì ký hiệu tiền tệ mặc định sẽ là $.

<title>AngularJS Filter Currency</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope){
            $scope.defaultNumber = 59.699;
            $scope.defaultNumberWhole = 59;
        });
</script>
<body>
        <div ng-app="myApp" ng-controller="myCtrl">
            Default Currency Filter:
            {{ defaultNumber | currency }}
            <br>
            Currency Filter on Whole Number:
            {{ defaultNumberWhole | currency }}
            <br>
            Custom Currency Filter:
            {{ defaultNumber | currency:'$COTCHES' }} -
            <br>
            Custom Currency Filter with Decimal Point Control (Angular 1.3+):
            {{ defaultNumber | currency:'£' }} -
            {{ defaultNumber | currency:'£':0 }} -
            {{ defaultNumber | currency:'£':1 }}
        </div>
</body>

Để ý kết quả thu được dưới đây ta sẽ thấy filter này không chỉ thêm ký hiệu tiền tệ mà còn tự động làm tròn tương tự như filter number ở trên.
kết quả ta thu được:

Default Currency Filter: $59.70

Currency Filter on Whole Number: $59.00

Custom Currency Filter: $COTCHES59.70

Custom Currency Filter with Decimal Point Control (Angular 1.3+): £59.70 - £60 - £59.7

Xem demo ví dụ này.

LimitTo: Giới hạn độ dài chuỗi hoặc mảng

<title>AngularJS Filter LimitTo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope){
          $scope.copy = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

          $scope.list = ['thu', 'linh', 'lien', 'hoa', 'nga', 'huong', 'thao']
        });
</script>
<body>
        <div ng-app="myApp" ng-controller="myCtrl">
            LimitTo Filter Applied to a String:
            {{ copy | limitTo:150 }}
            <br>
            LimitTo Filter Applied to an Array:
            <ul>
              <li ng-repeat="person in list | limitTo:4"> {{ person }} </li>
            </ul>
        </div>
</body>

kết quả ta thu được:

LimitTo Filter Applied to a String: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ..

LimitTo Filter Applied to an Array:

thu

linh

lien

hoa

Xem demo ví dụ này.

Dưới đây ta sẽ xem ví dụ sử dụng nhiều hơn 1 filter:
filter: Khi giá trị input thay đổi thì kết quả sẽ hiển thị tương ứng với input nhận vào

<title>AngularJS Filter Input</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.students = [
            {name:'Lien',address:'Ha Noi'},
            {name:'Linh',address:'Can Tho'},
            {name:'Thu',address:'Da Nang'},
            {name:'Hoa',address:'Hai Phong'},
            {name:'Nga',address:'Phu Tho'},
            ];
        });
</script>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>Filtering input:</p>
        <p><input type="text" ng-model="test"></p>
        <ul>
          <li ng-repeat="x in students | filter:test | orderBy:'address'">
            {{ (x.name | uppercase) + ', ' + x.address }}
          </li>
        </ul>
    </div>
</body>

Bộ lọc thứ 2 orderBy như đã nói ở trên có tác dụng sắp xếp hiển thị danh sách students ban đầu theo thứ tự address. Còn bộ lọc thứ nhất filter có tác dụng lọc ra những kết quả phù hợp với text mà người dùng nhập vào.

Xem demo ví dụ này.

Như đã nói ở phần mở đầu thì filter có thể được viết ở bất kỳ đâu. Nhưng các ví dụ trên đây ta chỉ viết chúng trong templates. Bây giờ ta sẽ viết filter trong controller với cú pháp <filterName>Filter
VD: currencyFilter, numberFilter, filterFilter..

<title>AngularJS Filter Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, filterFilter) {
        $scope.students = [
        {name:'Lien',address:'Ha Noi'},
        {name:'Linh',address:'Can Tho'},
        {name:'Thu',address:'Da Nang'},
        {name:'Hoa',address:'Hai Phong'},
        {name:'Nga',address:'Phu Tho'},
        {name:'Loan',address:'Ha Noi'},
        ];
        $scope.students = filterFilter($scope.students, 'Ha Noi');
    });
</script>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <ul>
          <li ng-repeat="x in students | orderBy:'address'">
            {{ (x.name | uppercase) + ', ' + x.address }}
          </li>
        </ul>
        <br>
    </div>
</body>

Kết quả ta thu được danh sách những học sinh có địa chỉ Ha Noi

LIEN, Ha Noi

LOAN, Ha Noi

Xem demo ví dụ này

II. Tạo một custom Filter đơn giản

1. Cú pháp

Ngoài các filter đã có sẵn, AngularJS cũng cho phép chúng ta tự tạo ra các filter của riêng mình với cấu trúc có dạng như sau:

app.filter('filter_name', function () {
      return function () {
        return;
      };
});

2. Ví dụ

Ta sẽ tạo ra một filter chuyễn chuỗi thường thành chuỗi in hoa mà không dùng filter uppercase mặc định nữa:

<title>AngularJS Custom Filter Uppercase</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = "John";
        });
        app.filter('makeUppercase', function () {
            return function (item) {
                return item.toUpperCase();
            };
        });
</script>
<body>
        <div ng-app="myApp" ng-controller="myCtrl">
            Name (makeUppercase): {{ name | makeUppercase }}
        </div>
</body>

kết quả ta thu được:

Name (makeUppercase): JOHN

Xem demo ví dụ này.

III. Kết luận và tham khảo

Ở bài nay ta cần ghi nhớ cấu trúc và một vài filter thường dùng mà AngularJS cung cấp để tránh việc viết lại filter đã có sẵn, như ở phần II ở trên viết lại filter uppercase là quá thừa, nhưng ở đây mình viết với mục đích giới thiệu là chính
Và dưới đây là một số nguồn mình tham khảo trong khi viết bài:

http://www.w3schools.com/angular/angular_filters.asp.

https://docs.angularjs.org/api/ng/filter/filter.

https://docs.angularjs.org/guide/filter.

https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters

http://toddmotto.com/everything-about-custom-filters-in-angular-js/