Bộ lọc AngularJS

❮ Trước Kế tiếp ❯

Bộ lọc có thể được thêm vào AngularJS để định dạng dữ liệu.

Bộ lọc AngularJS

AngularJS cung cấp các bộ lọc để chuyển đổi dữ liệu:

currency Định dạng một số thành một định dạng tiền tệ.
date Định dạng ngày thành một định dạng được chỉ định.
filter Chọn một tập hợp con các mục từ một mảng.
json Định dạng một đối tượng thành một chuỗi JSON.
limitTo Giới hạn một mảng / chuỗi, thành một số phần tử / ký tự được chỉ định.
lowercase Định dạng một chuỗi thành chữ thường.
numberĐịnh dạng một số thành một chuỗi.
orderBySắp xếp một mảng theo một biểu thức.
uppercaseĐịnh dạng một chuỗi thành chữ hoa.

Thêm bộ lọc vào biểu thức

Bộ lọc có thể được thêm vào biểu thức bằng cách sử dụng ký tự ống dẫn |, theo sau là bộ lọc.

Các uppercasechuỗi định dạng bộ lọc thành chữ hoa:

Thí dụ

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

Các lowercasechuỗi định dạng bộ lọc thành chữ thường:

Thí dụ

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

Thêm bộ lọc vào chỉ thị

Các bộ lọc được thêm vào các lệnh, chẳng hạn như ng-repeatbằng cách sử dụng ký tự ống dẫn |, theo sau là một bộ lọc:

Thí dụ

Bộ orderBylọc sắp xếp một mảng:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

Bộ lọc tiền tệ

Bộ currencylọc định dạng một số dưới dạng tiền tệ:

Thí dụ

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>

Đọc thêm về bộ lọc tiền tệ trong Tham khảo bộ lọc tiền tệ AngularJS của chúng tôi

Bộ lọc Bộ lọc

Bộ filterlọc chọn một tập hợp con của một mảng.

Bộ filterlọc chỉ có thể được sử dụng trên các mảng và nó trả về một mảng chỉ chứa các mục phù hợp.

Thí dụ

Trả lại các tên có chứa chữ cái "i":

Đọc thêm về bộ lọc bộ lọc trong Tham khảo bộ lọc bộ lọc AngularJS của chúng tôi

Lọc một mảng dựa trên đầu vào của người dùng

Bằng cách đặt ng-modelchỉ thị trên một trường đầu vào, chúng ta có thể sử dụng giá trị của trường đầu vào như một biểu thức trong một bộ lọc.

Nhập một ký tự vào trường đầu vào và danh sách sẽ thu nhỏ / phát triển tùy thuộc vào kết quả khớp:

Jani
Carl
Margareth
Hege
Joe
Gustav
Birgit
Mary
Kai

Thí dụ

Sắp xếp một mảng dựa trên đầu vào của người dùng

Nhấp vào tiêu đề bảng để thay đổi thứ tự sắp xếp ::

Tên	Quốc gia
Jani	Na Uy
Carl	Thụy Điển
Margareth	nước Anh
Hege	Na Uy
Joe	Đan mạch
Gustav	Thụy Điển
Birgit	Đan mạch
Mary	nước Anh
Kai	Na Uy

Bằng cách thêm ng-clickchỉ thị trên tiêu đề bảng, chúng ta có thể chạy một hàm thay đổi thứ tự sắp xếp của mảng:

Thí dụ

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
<tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
}
});
</script>

Bộ lọc tùy chỉnh

Bạn có thể tạo bộ lọc của riêng mình bằng cách đăng ký chức năng nhà máy bộ lọc mới với mô-đun của mình:

Thí dụ

Tạo bộ lọc tùy chỉnh có tên "myFormat":

<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>

<script>

</script>

Bộ myFormatlọc sẽ định dạng mọi ký tự khác thành chữ hoa.

❮ Trước Kế tiếp ❯

Hướng dẫn

Các ví dụ

Tài liệu tham khảo

Bộ lọc AngularJS