Trang chủ
AngularJS tut 9: Bộ lọc AngularJS 0 (0)
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 số thành định dạng tiền tệ.dateĐịnh dạng ngày thành một đị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 một 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 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>Hãy tự mình thử »
The currency Filter
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 Filter
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”:
<div ng-app="myApp" ng-controller="namesCtrl"><ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul></div>
Đọ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 nhập và danh sách sẽ thu nhỏ / lớn lên tùy thuộc vào kết quả khớp:
- Jani
- Carl
- Margareth
- Hege
- Joe
- Gustav
- Birgit
- Mary
- Kai
Thí 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>
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 một 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> Bộ myFormatlọc sẽ định dạng mọi ký tự khác thành chữ hoa.
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 số thành định dạng tiền tệ.dateĐịnh dạng ngày thành một đị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 một 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 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>Hãy tự mình thử »
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>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, 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>Hãy tự mình thử »
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>Hãy tự mình thử »
Đọ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”:<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 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 nhập và danh sách sẽ thu nhỏ / lớn lên tùy thuộc vào kết quả khớp:
- Jani
- Carl
- Margareth
- Hege
- Joe
- Gustav
- Birgit
- Mary
- Kai
Thí 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
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>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 bộ lọc mới với mô-đun của mình:
Thí dụ
Tạo một 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ộ myFormatlọc sẽ định dạng mọi ký tự khác thành chữ hoa.
Lượt xem : 233
