[Bài 2] – Cách sử dụng filter trong AngularJS

Bạn đang ở bài 2 trong 3 bài của serie AngularJS.

Filter là gì? Nó có ăn được không? =))

Trong AngularJS filter được dùng để dịnh dạng, xử lý lại dữ liệu và đồng thời lọc dữ liệu nếu giá trị là array.

Đầu tiên hãy xem AngularJS đã có sẵn những filter nào?

filter  Lọc dữ liệu trong array theo một hay nhiều điều kiện nào đó.

Cách dùng: {{ filter_expression | filter : [điều kiện] : [kiểu lọc] }}

  • điều kiện: có thể là object hoặc function
  • kiểu lọc: tương đối hoặc chính xác
currency   Định dạng giá trị kiểu tiền tệ (Ví dụ: $1,234.56). Nếu không gán kí tự tiền tệ thì filter sẽ sử dụng kí tự mặc định của khu vực. (Lưu ý: để trong cặp dấu nháy)

 Cách dùng: {{ currency_expression | currency : [‘kí hiệu tiền tệ’] : [số chữ số thập phân] }}

number  Định dạng kiểu số. Tham số thứ 2 sẽ là số kí tự chữ số thập phân cần lấy

Cách dùng: {{ number_expression | number : [số chữ số thập phân] }}

date  Định dạng ngày giờ

Cách dùng: {{ date_expression | date : [định dạng] : [múi giờ]  }}

json  Chuyển object về chuỗi JSON để hỗ trợ việc debug dữ liệu

Cách dùng: {{ json_expression | json : [số khoảng trắng] }}

lowercase  Chữ viết thường

Cách dùng: {{ lowercase_expression | lowercase }}

uppercase  Chữ viết hoa

Cách dùng: {{ lowercase_expression | uppercase  }}

limitTo  Cắt chuỗi hoặc mảng với số lượng kí tự/phần tử ở một vị trí được xác định.

Cách dùng: {{ limitTo_expression | limitTo : [độ dài] : [chỉ mục bắt đầu]  }}

Ví dụ:

  • {{ ‘abcdef’ | limitTo:2 }} = ‘ab’
  • {{ ‘abcdef’ | limitTo:2:2 }} = ‘cd’
  • {{ [0,1,2,3,4,5,6] | limitTo:3 }} = [0,1,2]
orderBy  Sắp xếp lại mảng dữ liệu theo một hoặc nhiều trường theo một chiều tăng hay giảm

Cách dùng: {{ orderBy_expression | orderBy : [trường hoặc function] : [giảm dần] }}

Những cách dùng trên được áp dụng khi in dữ liệu ở HTML, nếu bạn muốn sử dụng nó trong code JS thì phải làm sao?

Khai báo $filter ở phần injection của controller, factory hay directive. Sau đó sử dụng cú pháp:

$filter('tên filter')(tham số);

Ví dụ: $filter(‘lowercase’)(input);

Tôi có thể tự tạo một filter tùy biến không?

Điều này là hoàn toàn có thể nhé! Mình đã chuẩn bị một ví dụ để mọi người cùng xem, mình đảm bảo bạn có thể tạo ngay một filter sau khi xem ví dụ đó.

Thật đơn giản phải không? Hãy cho tôi xem bạn đã tạo được gì ở phần comment bên dưới và hẹn gặp lại các bạn ở bài viết kế tiếp nhé. Xin cảm ơn!

[Bài 2] – Cách sử dụng filter trong AngularJS
4 (80%) 1 vote

Từ khóa tìm kiếm:

  • cach unf ban
  • chạy auto unfriend
  • lọc danh sách bạn bè không tương tác
  • cách lọc tương tác bạn bè
  • cách sử dụng sublime text 3
  • fb tự động lọc bạn

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz