AngularJS - Filter trong AngularJS – Hướng dẫn filter AngularJS

Filter là gì?

– Filter trong AngularJs thường được dùng để lọc hoặc format dữ liệu.

>> AngularJS - Filter trong AngularJS – Hướng dẫn filter AngularJS

>> AngularJS khá mạnh mẽ trong việc validate form đăng ký

>> AngularJS – Tài liệu học AngularJS căn bản Tiếng Việt AngularJS

Theo tinh thần của UNIX filters và sử dụng các cú pháp tương tự | (pipe).

Angular cung cấp một số filter được xây dựng sẵn như : lowercase, date, number, currency, limitTo, orderBy…

Ví dụ:

{{'sampletext' | uppercase}}

=> Output: SAMPLETEXT

Ngoài những filter cơ bản thì chúng ta hoàn toàn có thể tạo ra các filter cho phục vụ cho từng mục đích riêng. Những filter này do chính chúng ta viết và được sử dụng để lọc dữ liệu 1 cách tùy ý, giúp nâng cao khả năng sử dụng của filter.

Loại 1: Filter cho 1 đối tượng đơn lẻ.

Filter này chỉ sử dụng cho 1 biến (không phải mảng, danh sách hay đối tượng đặc biệt). Đối với loại filter này chúng ta thường dùng để format dữ liệu ví dụ như in hoa, in thường đối với chữ cái và định dạng ngày tháng cho dữ liệu kiểu date.

Ví dụ:

<p>{{ 1400956671914 | date: 'dd-MM-yyyy' }}</p>;

Kết quả sau khi trình duyệt biên dịch ra => 24-05-2014.

Trong ví dụ trên chúng ta đã sử dụng filter có sẵn của AngularJS, vậy filter này được tạo ra như thế nào. Tất cả custom filter đều được tạo dưới mẫu cơ bản sau:

app.filter('', function () {

 return function () {

 return;

 };

});

Để tạo một filter chúng ta sẽ thêm module filter() vào ứng dụng và đặt tên cho filter trong cặp dấu nháy đơn. Như bạn có thể thấy, chúng ta hoàn toàn có thể đặt tên và quy định các công việc xử lý cho các filter tự tạo.

Tiếp theo chúng ta hãy xem xét cách thức để tạo ra filter uppercase (in hoa):

app.filter('makeUppercase', function () {

 return function (item) {

 return item.toUpperCase();

 };

});

Trong đoạn code trên “makeUppercase” là tên mà chúng ta đặt cho filter này, item là giá trị truyền vào. Sau khi ra khỏi hàm thì giá trị trả về đã được in hoa.

Ví dụ 1 ứng dụng đầy đủ cho filter này:

var app = angular.module('app', []);

app.filter('makeUppercase', function () {

 return function (item) {

 return item.toUpperCase();

 };

});

app.controller('PersonCtrl', function () {

 this.username = 'Ho Chi Minh';

});

Sử dụng bên HTML:

<div ng-app="app">

  <div ng-controller="PersonCtrl as person">

    <p>

      {{ person.username | makeUppercase }}

    </p>

  </div>

</div>

Chúng ta sẽ nhận được kết quả output là “HO CHI MINH”.

Loại 2: Filter cho vòng lặp.

Filter làm việc khá tốt đối với vòng lặp, cú pháp của filter đối với vòng lặp cũng tương tự như với đối tượng riêng lẻ. Hãy xem ví dụ mẫu bên dưới:

app.controller('PersonCtrl', function () {

  this.friends = [{

    name: 'Andrew'

  }, {

    name: 'Will'

  }, {

    name: 'Mark'

  }, {

    name: 'Alice'

  }, {

    name: 'Todd'

  }];

});

Chúng ta có thể lặp đơn giản dùng ng-repeat cùng với filter:

<ul>

  <li ng-repeat="friend in person.friends">

    {{ friend }}

  </li>

</ul>

Thêm 1 filter với tên startsWithA để quy định chỉ hiển thị những tên bắt đầu bằng ký tự A:

<ul>

 <li ng-repeat="friend in person.friends | startsWithA">

 {{ friend }}

 </li>

</ul>

Bây giờ chúng ta sẽ tạo filter startWithA:

app.filter('startsWithA', function () {

 return function (items) {

 var filtered = [];

 for (var i = 0; i < items.length; i++) {

 var item = items[i];

 if (/a/i.test(item.name.substring(0, 1))) {

 filtered.push(item);

 }

 }

 return filtered;

 };

});

Có 2 điểm khác ở đây: Thứ nhất “item” ở ví dụ trước bây giờ là “items”, đây là mảng mà chúng ta lấy được từ ng-repeat. Thứ 2 là chúng ta cần phải trả về kiểu dữ liệu là 1 mảng:

app.filter('startsWithA', function () {

 // Hàm này được gọi bởi Angular trong mỗi lần lặp

 return function (items) {

 // Tạo mảng mới

 var filtered = [];

 for (var i = 0; i < items.length; i++) {

 var item = items[i];

 // Kiểm tra xem có phần tử nào bắt đầu bằng chữ 'a' hay không.

 if (/a/i.test(item.name.substring(0, 1))) {

 // Đưa nó vào mảng mới

 filtered.push(item);

 }

 }

 // Trả về mảng chứa những phần tử kết quả

 return filtered;

 };

});

Phiên bản ES5 sử dụng Array.prototype.filter ngắn gọn hơn:

app.filter('startsWithA', function () {

 return function (items) {

 return items.filter(function (item) {

 return /a/i.test(item.name.substring(0, 1));

 });

 };

});

=> Kết quả trả về sẽ là Anh Khoa và Anh Quốc.

Loại 3: Filters cho vòng lặp có đối số

Cũng khá giống với loại 2 nhưng ở loại này chúng ta sẽ cho phép người dùng có thể lọc theo điều kiện mà họ mong muốn bằng cách nhập vào tham số.

<input type="text" ng-model="letter">

<ul>

 <li ng-repeat="friend in person.friends | startsWithLetter:letter">

 {{ friend }}

 </li>

</ul>

Ở đây, tham số truyền vào filter sẽ được lấy từ ng-model tên là “letter”. Với ví dụ trước, tham số của hàm trong filter chỉ gồm “items” thì bây giờ ta sẽ thêm sau nó đối số thứ 2 là letter để dùng cho điều kiện lọc.

app.filter('startsWithLetter', function () {

 return function (items, letter) {

 var filtered = [];

 var letterMatch = new RegExp(letter, 'i');

 for (var i = 0; i < items.length; i++) {

 var item = items[i];

 if (letterMatch.test(item.name.substring(0, 1))) {

 filtered.push(item);

 }

 }

 return filtered;

 };

});

Chúng ta cũng có thể truyền nhiều hơn 1 tham số với cú pháp tương tự:

<input type="text" ng-model="letter">

<ul>

<li ng-repeat="friend in person.friends | startsWithLetter:letter:number:somethingElse">

{{ friend }}

</li>

</ul>

Và filter sẽ có cấu trúc như thế này:

app.filter('startsWithLetter', function () {

return function (items, letter, number, somethingElse, anotherThing) {

// Xử lý

};

});

Loại 4: Controller/$scope filter

Đối với loại filter này, chỉ nên sử dụng nếu bạn thực sự phải sử dụng nó. Ở đây chúng ta sẽ sử dụng ưu điểm của cú pháp có đối số, $scope và đối tượng filter của AngularJS. Sự khác biệt của loại filter này là các hàm được khai báo thành 1 hàm filter, vì vậy về mặt kỹ thuật là viết một hàm để đưa vào 1 hàm và trả về 1 hàm. Chúng ta không truy cập tới mảng, chỉ là một đối tượng độc lập. Bây giờ chúng ta sẽ tạo 1 hàm khác với chức năng lọc bằng ký tự “w”. Đầu tiên là định nghĩa 1 hàm trong Controller:

app.controller('PersonCtrl', function () {

 // Đây là filter của chúng ta, hàm này khá đơn giản

 this.startsWithW = function (item) {


return /w/i.test(item.name.substring(0, 1));


 };

 this.friends = [{

 name: 'Andrew'

 }, {

 name: 'Will'

 }, {

 name: 'Mark'

 }, {

 name: 'Alice'

 }, {

 name: 'Todd'

 }];

});

Sử dụng:

<div ng-controller="PersonCtrl as person">

 <ul>

 <li ng-repeat="friend in person.friends | filter:person.startsWithW">

 {{ friend }}

 </li>

 </ul>

</div>

Nhược điểm của loại filter này là nó rõ ràng không thể sử dụng ở những nơi khác không thuộc phạm vi controller này.

Nhận Diệt côn trùng: Chuột, gián, kiến muỗi, mối.. cho Trường học, Nhà máy, xí nghiệp, Cơ quan, văn phòng, Khách sạn, resort, nhà nghỉ, Nhà hàng, câu lạc bộ, Chung cư, cao ốc, văn phòng cho thuê, Siêu thị, cửa hàng, kho bãi, Xưởng hạt điều, xưởng may, xưởng gỗ, Trang trại, nhà vườn,...Tại Các Quận Trong Thành Phố Hồ Chí Minh và các tỉnh trong toàn quốc. Hotline: 0986 018 930 (Anh Sơn)