AngularJS - Filters - Amzuni - Học lập trình trực tuyến

AngularJS Filters: Định dạng và lọc dữ liệu

Filters trong AngularJS là các hàm được sử dụng để định dạng và lọc dữ liệu. Chúng giúp bạn hiển thị dữ liệu theo cách mong muốn và cải thiện khả năng đọc của ứng dụng.

Các loại Filter

AngularJS cung cấp một số filter cơ bản:

currency: Định dạng số thành tiền tệ.
date: Định dạng ngày tháng.
filter: Lọc một mảng dựa trên một chuỗi tìm kiếm.
json: Định dạng một đối tượng JavaScript thành chuỗi JSON.
lowercase: Chuyển đổi chuỗi thành chữ thường.
number: Định dạng số.
uppercase: Chuyển đổi chuỗi thành chữ hoa.
orderBy: Sắp xếp một mảng theo một hoặc nhiều thuộc tính.
limitTo: Lấy một số phần tử đầu hoặc cuối của một mảng.

Sử dụng Filters

Để sử dụng một filter, bạn đặt nó sau dấu pipe | trong một expression.

HTML

<p>{{ myVariable | currency }}</p>

Tạo Custom Filters

Bạn có thể tạo các custom filter để thực hiện các phép biến đổi dữ liệu tùy chỉnh.

JavaScript

angular.module('myApp', [])
  .filter('myCustomFilter', function() {
    return function(input) {
      // ... logic của filter
      return output;
    };
  });

Ví dụ

JavaScript

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.price = 123456.78;
    $scope.date = new Date();
    $scope.items = ['apple', 'banana', 'orange'];
  });

HTML

<div ng-app="myApp" ng-controller="MyController">
  <p>Giá tiền: {{ price | currency }}</p>
  <p>Ngày hôm nay: {{ date | date }}</p>
  <p>Danh sách trái cây: {{ items | filter:'apple' }}</p>
</div>

Các tính năng của Filters

Định dạng dữ liệu: Định dạng số, ngày tháng, chuỗi theo cách mong muốn.
Lọc dữ liệu: Lọc một mảng dựa trên một chuỗi tìm kiếm hoặc các điều kiện khác.
Tạo custom filters: Tạo các filter tùy chỉnh để thực hiện các phép biến đổi dữ liệu phức tạp hơn.

Các ứng dụng của Filters

Định dạng số, ngày tháng, chuỗi trong View.
Lọc dữ liệu để hiển thị các kết quả phù hợp.
Tạo các custom filters để thực hiện các phép biến đổi dữ liệu tùy chỉnh.

AngularJS – Filters