AngularJS: Filter trong AngularJS
Giải phóng thời gian, khai phóng năng lực
Filter có thể được thêm vào AngularJS để định dạng (format) dữ liệu.
Các loại filter trong AngularJS
AngularJS cung cấp các loại filter sau để chuyển đổi dữ liệu:
currency
Chuyển số sang dạng tiền tệ.date
Chuyển ngày sang định dạng được chỉ định.filter
Chọn một tập con từ một mảng.json
Định dạng đối tượng thành 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
Chuyển chuỗi thành dạng in thường.uppercase
Chuyển chuỗi thành chữ in hoa.number
Chuyển số thành chuỗi.orderBy
Sắp xếp mảng bằng một biểu thức.
Thêm filter vào biểu thức
Filter có thể được thêm vào biểu thức bằng cách sử dụng ký tự | (pipe)
nằm trước filter.
Ví dụ sau thêm filter uppercase
vao biểu thức để chuyển chuỗi thành chữ in hoa:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div> <script> angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "John", $scope.lastName = "Doe" }); </script> </body> </html>
Còn đây là ví dụ chuyển thành chuỗi in thường:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | lowercase }}</p> </div> <script> angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "John", $scope.lastName = "Doe" }); </script> </body> </html>
Thêm Filter vào chỉ thị
Filter được thêm vào chỉ thị chẳng hạn như ng-repeat
cũng bằng cách sử dụng |
đặt trước filter.
Ví dụ
Thêm filter orderBy để sắp xếp mảng:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>Looping with objects:</p> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </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'} ]; }); </script> </body> </html>
Filter currency
Filter currency
dùng để định dạng tiền tệ với chuỗi số.
Ví dụ:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="costCtrl"> <h1>Price: {{ price | currency }}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.price = 58; }); </script> <p>The currency filter formats a number to a currency format.</p> </body> </html>
Filter filter
Filter filter
dùng để lấy một tập con của một mảng.
Filter này có thể sử dụng cho mảng hoặc chuỗi và nó sẽ trả về một mảng hoặc chuỗi con chỉ chứa các mục tương thích với yêu cầu.
Nếu chuỗi cần filter là rỗng thì tương ứng với lấy toàn bộ mảng.
Ví dụ
Trả về các tên chứa ký tự 'i':
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | filter : 'i'"> {{ x }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai' ]; }); </script> <p>This example displays only the names containing the letter "i".</p> </body> </html>
Lọc một mảng theo dữ liệu người dùng nhập vào
Bằng cách đặt chỉ thị ng-model
cho thẻ <input> ta có thể sử dụng giá trị của thẻ này như là một biểu thức trong một filter.
Ví dụ:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>Type a letter in the input field:</p> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test"> {{ x }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai' ]; }); </script> <p>The list will only consists of names matching the filter.</p> </body> </html>
Sắp xếp một mảng dựa trên giá trị nhập vào
Bằng cách thêm chỉ thị ng-click
vào cột tiêu đề của bảng ta có thể thực hiện hàm thay đổi thứ tự sắp xếp của mảng.
Ví dụ:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <p>Click the table headers to change the sorting order:</p> <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> </body> </html>
Tự tạo filter
Ta có thể tự tạo filter bằng cách đăng ký một hàm filter mới cho module của mình.
Ví dụ
Tạo một filter có tên "myFormat":
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <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> <p>Make your own filters.</p> <p>This filter, called "myFormat", will uppercase every other character.</p> </body> </html>
Filter myFormat
chuyển tất cả các ký tự có chỉ số chẵn (0, 2, 4, ...) thành dạng ký tự in hoa.
Giải phóng thời gian, khai phóng năng lực