Filter trong AngularJS

November 14, 2014 Share on fb Share on twitter

Trong AngularJS, Filter là cơ chế định dạng dữ liệu theo kiểu luồng dẫn (pipe): dữ liệu sẽ được đi qua lần lượt từng bộ xử lý định dạng thay vì áp dùng các lời gọi hàm lồng nhau. Cơ chế này giống với cách xử lý PIPE để kết hợp nhiều lệnh trong các bộ Shell của Linux. Bài viết này giới thiệu về các loại Filter và cách áp dụng Filter trong lập trình ứng dụng với AngularJS.

Giới thiệu về Filter trong AngularJS

Filter trong AngularJS được sử dụng để lọc dữ liệu và format giá trị hiển thị cho người dùng.

Có một số filter được xây dựng sẵn để người lập trình làm việc với number, string...

Làm việc với Filter

Có 2 cách làm việc với filter là dùng trong expression HTML (DOM) hoặc cập nhật dữ liệu trực tiếp tại controller, service.

Phần dưới sẽ mô tả chi tiết cách làm việc của Filter.

Cú pháp dùng trong DOM:

{{ expression | filter }}

Ta cũng có thể dùng nhiều filter trong một biểu thức, được ngăn cách nhau bởi |

{{ expression | filter1 | filter2 | filter3 }}

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

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

Khi dùng với Service, Controller:

angular.module('FilterInControllerModule', [])
.controller('FilterController', ['$filter', function($filter) {
  this.filteredArray = $filter('filter')(array, argument1, argument2, ...);
}]);

Một số Filter có sẵn trong AngularJS

currency: định dạng số sang định dạng tiền tệ, filter chọn currency symbol là mặc định, nếu không có tham số gì kèm theo.
number: chuyển đổi thành chuỗi số, tách bằng dấu phẩy, numberFilter cũng tùy chọn kích thước số thập phân là bao nhiêu chữ số sau dấu phẩy.
lowercase: chuyển đổi thành chuỗi thường.
uppercase: chuyển đổi thành chuối hoa.
json: đối tượng JSON hoặc array.
date: đối tượng ngày, định dạng gồm short, medium, long.
limitTo: trả lại kết quả là 1 substring có thể bắt đầu hoặc kết thúc 1 chuỗi.
orderBy: lọc trên mảng và sắp xếp.
filter: lọc 1 mảng theo: String: nếu có biểu thức chuỗi, AngularJS sẽ tìm từ khóa trong từng đối tượng của mảng và nếu tìm thấy, phần tử sẽ được gọi. (có thể tìm phủ định bằng ! và từ khóa kèm theo). Object: trả về từng phần tử trong mảng. Function: linh động cho nhiều lựa chọn, việc filter có thể tùy ý người lập trình.

Ví dụ minh họa:

Ví dụ về filter với String, Object, Function.

Tại file index.html có 3 khối lệnh div tương ứng cho việc lọc dữ liệu với expression là String, Object và Function. Tại đây filter với String thì ta sử dụng filter với điều kiện filter:stringname, filter với Object thì ta sử dụng filter với điều kiện filter:{name:query, age:'22'} và filter với Function dùng filter: filterFunction, filterFunction được định nghĩa trong file javascript.

File script.js thì ta tạo 1 controller chứa mảng đối tượng friends gồm tên và tuổi. Ta định nghĩa thêm filterFunction với điều kiện là name bắt đầu bằng "Ma".

Kết quả sẽ hiển thị như sau:

Fliter với Controller, Service

AngularJS cho phép ta dùng Filter ở bất kỳ nơi nào ta muốn với Depedency Injection, không cần truy cập vào DOM hoặc UI, ta có thể sử dụng business logic của Filter trong Javascript.

Bất kỳ Filter cho dù được xây dựng hoặc có sẵn, có thể được injected vào services hoặc controller bằng tên "Filter" ở cuối mỗi tên bộ lọc. <filterName>Filter

Ví dụ: currencyFilter, numberFilter...

Ví dụ sau có filterFilter lọc mảng theo điều kiện , filterFilter được gọi trực tiếp trong Controller, bằng cách này thì Controller có thể gọi filter khi cần.

File index.html

<body ng-app="FilterInController">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Entries that contain an "a":
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>

File script.js

angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Marry'},
        {name: 'Anna'},
        {name: 'Hannah'},
        {name: 'Chloe'},
        {name: 'Lisa'},
        {name: 'Herry'}
      ];
      this.filteredArray = filterFilter(this.array, 'a');
    }]);

Custom Filter

AngularJS cho phép người dùng tự tạo các Filter để sử dụng theo từng mục đích khác nhau. Một Custom Filter là một function, trong đó có một đầu vào như một đối số. Function được gọi với giá trị mà các giá trị mà Filter đã áp dụng trước đó.

Cấu trúc :

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

Ví dụ 1:

Đoạn code trên thực hiện việc in hoa 1 chuỗi kí tự do người dùng nhập vào:

Stateful Filter

Là một tính năng mới của AngularJS 1.3. Nó cho phép bạn xác định bộ lọc có thể phụ thuộc vào những thứ khác mà giá trị, đối tượng do bên kia tự định nghĩa. Stateful ảnh hưởng đến hiệu suất tổng thể của ứng dụng nên hạn chế sử dụng. Hầu hết các stateful đều có thể chuyển sang stateless. Ở Stateful Filter (Filter có trạng thái) ta có thể đưa thêm tham số dưới dạng bơm các phụ thuộc. Mặc định nếu không sử dụng stateful thì ta khai báo là false.

Filter chuyển đổi dữ liệu:

angular.module('StatefulFilterExampleModule', [])
.filter('StatefulExampleFilter', function() {
    return function(input, argument) {
          // Do your logic
        ...
        return data;
     }
});

Dùng với service:

angular.module('StatefulFilterExampleModule', [])
.filter('StatefulExampleFilter', ['service',  function('service') {
    return function(input, argument) {
          // Do your logic
        ...
        data  += service.data
        return data;
     }
}]);

Để đảm bảo dữ liệu từ service đã được lấy ra lọc thì ta cần khai báo bộ lọc này là stateful Filter.

angular.module('StatefulFilterExampleModule', [])
.filter('StatefulExampleFilter', ['service',  function('service') {
    var filterFunction = function(input, argument) {
          // Do your logic
        ...
        data  += service.data
        return data;
     };
    filterFunction.$stateful = true;
    return filterFunction;
}]);

Ví dụ về stateful Fliter (tham khảo): Stateful Filter

Bài viết này giới thiệu Filter trong AngularJS với mục đích dùng Filter để định dạng các giá trị của một biểu thức để hiển thị kết quả, nó thường được dùng trong việc lọc và sắp xếp danh sách. Có 2 cách dùng Filter là hiển thị trong DOM hoặc dùng Filter với Controller, Service. Người lập trình có thể tự định nghĩa các Filter riêng bằng cách viết các filter function trong file javascript để sử dụng.

Dong Diem Thuy's Blog