Bộ lọc AngularJS
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 định dạng tiền tệ. -
dateĐịnh dạng một ngày theo định dạng được chỉ định. -
filterChọ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 chuỗi JSON. -
limitToGiớ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 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 | , theo sau là một bộ lọc.
Các chuỗi định dạng bộ lọc uppercase thành chữ hoa:
Ví dụ
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Hãy tự mình thử » Các chuỗi định dạng bộ lọc lowercase thành chữ thường:
Ví dụ
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Hãy tự mình thử » Thêm bộ lọc vào chỉ thị
Các bộ lọc được thêm vào các lệnh, như ng-repeat , bằng cách sử dụng ký tự ống dẫn | , theo sau là bộ lọc:
Ví dụ
Bộ lọc orderBy 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>
Hãy tự mình thử »Bộ lọc tiền tệ
Bộ lọc currency định dạng một số dưới dạng tiền tệ:
Ví dụ
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Hãy tự mình thử »Đọc thêm về bộ lọc tiền tệ trong Tài liệu tham khảo bộ lọc tiền tệ AngularJS của chúng tôi
Bộ lọc Bộ lọc
Bộ lọc filter chọn một tập hợp con của một mảng.
Bộ lọc filter chỉ có thể được sử dụng trên mảng và nó trả về một mảng chỉ chứa các mục phù hợp.
Ví dụ
Trả về tên có chứa chữ "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Hãy tự mình thử »Đọc thêm về bộ lọc bộ lọc trong Tài liệu 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 lệnh ng-model trên trường đầu vào, chúng ta có thể sử dụng giá trị của trường đầu vào làm biểu thức trong bộ lọc.
Nhập một chữ cái vào trường đầu vào và danh sách sẽ thu nhỏ/tăng lên tùy thuộc vào kết quả khớp:
- {{x }}
Ví dụ
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
Hãy tự mình thử »Sắp xếp một mảng dựa trên đầu vào của người dùng
Bấm vào tiêu đề bảng để thay đổi thứ tự sắp xếp::
| Tên | Quốc gia |
|---|---|
| {{x.name}} | {{x.country}} |
Bằng cách thêm lệnh ng-click vào 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:
Ví 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> Hãy tự mình thử »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 sản xuất bộ lọc mới với mô-đun của mình:
Ví 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>
var app =
angular.module('myApp', []);
app.filter(' myFormat ',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
Hãy tự mình thử » Bộ lọc myFormat sẽ định dạng mọi ký tự khác thành chữ hoa.
