[AngularJS toàn tập] Phần 5 : Filter
Angular có rất nhiều ưu điểm, một trong những ưu điểm đó là filter, nó giúp cho việc code đơn giản mà nhanh hơn. Filter được sử dụng để thay đổi, lọc dữ liệu cho kết quả là một chuỗi khác. Dưới đây là danh sách các filter thông dụng thường được sử dụng : uppercase : Đổi toàn bộ text sang ...
Angular có rất nhiều ưu điểm, một trong những ưu điểm đó là filter, nó giúp cho việc code đơn giản mà nhanh hơn. Filter được sử dụng để thay đổi, lọc dữ liệu cho kết quả là một chuỗi khác.
Dưới đây là danh sách các filter thông dụng thường được sử dụng :
- uppercase : Đổi toàn bộ text sang chữ hoa
- lowercase : Đổi toàn bộ text sang chữ thường
- currency : Định dạng text dạng tiền tệ
- filter : Lọc các mảng, kết quả là chuỗi con dựa trên các điều kiện cung cấp
- orderby : Sắp xếp các mảng theo vào các thông tin cung cấp
lowercase filter
Bộ lọc lowercase sẽ cho đầu ra là tất cả các kí tự thường. Bạn có thể xem ví dụ sau đây, mình sử dụng bộ lọc lowercase ở bên trong một expression. Mình sử dụng với employee.name, như vậy toàn bộ tên của nhân viên sẽ được chuyển qua chữ thường.
<body ng-app="lowerCaseFilter"> <div ng-controller="ExampleController"> <table class="employees"> <tr> <th>Name</th> <th>Phone Number</th> </tr> <tr ng-repeat="employee in employees"> <td>{{employee.name | lowercase}}</td> <td>{{employee.phone}}</td> </tr> </table> </div> </body>
angular.module('lowerCaseFilter', []) .controller('ExampleController', ['$scope', function($scope) { $scope.employees = [ {name: 'Dinh Thanh Tam', phone: '123456'}, {name: 'Hoang Van Quan', phone: '987612'}, {name: 'Nguyen Thanh Linh', phone: '321223'}, {name: 'Nguyen Dinh Huan', phone: '555878'}, {name: 'Cao Duy Khanh', phone: '551235'} ]; }]);
Xem demo tại https://jsfiddle.net/SonCheDinh/mf4v7mxb/
uppercase filter
Ngược lại với bộ lọc lowercase là bộ lọc uppercase sẽ cho đầu ra là tất cả các kí tự hoa. Như ví dụ bên trên, bạn chỉ việc cho bộ lọc uppercase vào expression.
<body ng-app="lowerCaseFilter"> <div ng-controller="ExampleController"> <table class="employees"> <tr> <th>Name</th> <th>Phone Number</th> </tr> <tr ng-repeat="employee in employees"> <td>{{employee.name | uppercase}}</td> <td>{{employee.phone}}</td> </tr> </table> </div> </body>
Xem demo tại https://jsfiddle.net/SonCheDinh/soxdmhya/
Filter filter
Đây là bộ lọc mà bạn có thể lọc theo kiểu điều kiện là chứa, bạn có thể tạo ra một ô như ô search để input name và bộ lọc sẽ lọc và hiển thị những record chứa text mà bạn gõ vào. Bạn có thể xem ví dụ ở đây mình cho filter với điều kiện là chứa '23'
<body ng-app="orderByFilter"> <div ng-controller="ExampleController"> <input type="text" ng-model="employeeName"> <table class="employees"> <tr> <th>Name</th> <th>Phone Number</th> <th>Age</th> </tr> <tr ng-repeat="employee in employees | filter: '23'"> <td>{{employee.name}}</td> <td>{{employee.phone}}</td> <td>{{employee.age}}</td> </tr> </table> </div> </body>
Xem demo tại https://jsfiddle.net/SonCheDinh/3bkgwwby/
currency fillter
Bộ lọc currency trả về kết quả dưới định dạng tiền tệ.
<body ng-app="lowerCaseFilter"> <div ng-controller="ExampleController"> <table class="employees"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr ng-repeat="employee in employees"> <td>{{employee.name}}</td> <td>{{employee.salary | currency}}</td> </tr> </table> </div> </body>
angular.module('lowerCaseFilter', []) .controller('ExampleController', ['$scope', function($scope) { $scope.employees = [ {name: 'Dinh Thanh Tam', salary: '3000'}, {name: 'Hoang Van Quan', salary: '1900'}, {name: 'Nguyen Thanh Linh', salary: '3100'}, {name: 'Nguyen Dinh Huan', salary: '1500'}, {name: 'Cao Duy Khanh', salary: '2500'} ]; }]);
Xem demo tại đây : https://jsfiddle.net/SonCheDinh/ks696pxs/
orderBy filter
Đây là bộ lọc dùng để sắp xếp các record trong mảng theo thứ tự nào đó. Bạn có thể sắp xếp dựa trên 1 attribute bất kì của record. Bạn có thể thấy ở ví dụ dưới đây mình có viết orderBy: 'age' Nó sẽ sắp xếp các record theo thứ tự tăng dần của age, nếu bạn muốn thứ tự giảm dần thì bạn có thể sử dụng orderBy: '-age'.
<body ng-app="orderByFilter"> <div ng-controller="ExampleController"> <table class="employees"> <tr> <th>Name</th> <th>Phone Number</th> <th>Age</th> </tr> <tr ng-repeat="employee in employees | orderBy:'age'"> <td>{{employee.name}}</td> <td>{{employee.phone}}</td> <td>{{employee.age}}</td> </tr> </table> </div> </body>
angular.module('orderByFilter', []) .controller('ExampleController', ['$scope', function($scope) { $scope.employees = [ {name: 'Tam', phone: '123456', age: 15}, {name: 'Quan', phone: '987612', age: 20}, {name: 'Linh', phone: '321223', age: 21}, {name: 'Huan', phone: '555878', age: 35}, {name: 'Khanh', phone: '551235', age: 29} ]; }]);
xem demo tại : https://jsfiddle.net/SonCheDinh/wbdzhLq8/
Sử dụng filter động
Động ở đây nghĩa là bạn sẽ không fix cứng filter, nếu bạn sử dụng order filter thì việc thay đổi cách sắp xếp sẽ thường xuyên xảy ra vì thế bạn không thể fix cứng nó theo tên, hay tuổi, hay một attribute nào đó được. Vậy bạn phải làm thế nào? Tất nhiên với angularJS chúng ta có thể làm một các dễ dàng. Bạn có thể xem ví dụ sau
<body ng-app="orderByExample2"> <div ng-controller="ExampleController"> <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre> <hr/> <button ng-click="propertyName = null; reverse = false">Set to unsorted</button> <hr/> <table class="employees"> <tr> <th> <button ng-click="sortBy('name')">Name</button> <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span> </th> <th> <button ng-click="sortBy('phone')">Phone Number</button> <span class="sortorder" ng-show="propertyName === 'phone'" ng-class="{reverse: reverse}"></span> </th> <th> <button ng-click="sortBy('age')">Age</button> <span class="sortorder" ng-show="propertyName === 'age'" ng-class="{reverse: reverse}"></span> </th> </tr> <tr ng-repeat="employee in employees | orderBy:propertyName:reverse"> <td>{{employee.name}}</td> <td>{{employee.phone}}</td> <td>{{employee.age}}</td> </tr> </table> </div> </body>
angular.module('orderByExample2', []) .controller('ExampleController', ['$scope', function($scope) { var employees = [ {name: 'Tam', phone: '123456', age: 15}, {name: 'Quan', phone: '987612', age: 20}, {name: 'Linh', phone: '321223', age: 21}, {name: 'Huan', phone: '555878', age: 35}, {name: 'Khanh', phone: '551235', age: 29} ]; $scope.propertyName = 'age'; $scope.reverse = true; $scope.employees = employees; $scope.sortBy = function(propertyName) { $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false; $scope.propertyName = propertyName; }; }]);
Xem demo tại : https://jsfiddle.net/SonCheDinh/L36p326t/
Sử dụng orderBy filter trong controller
Bạn có thể sử dụng filter trong controller không? Chắc chắn câu trả lời là có. Bạn có thể xem ví dụ sau đây.
<body ng-app="orderByExample3"> <div ng-controller="ExampleController"> <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre> <hr/> <button ng-click="sortBy(null)">Set to unsorted</button> <hr/> <table class="employees"> <tr> <th> <button ng-click="sortBy('name')">Name</button> <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span> </th> <th> <button ng-click="sortBy('phone')">Phone Number</button> <span class="sortorder" ng-show="propertyName === 'phone'" ng-class="{reverse: reverse}"></span> </th> <th> <button ng-click="sortBy('age')">Age</button> <span class="sortorder" ng-show="propertyName === 'age'" ng-class="{reverse: reverse}"></span> </th> </tr> <tr ng-repeat="employee in employees"> <td>{{employee.name}}</td> <td>{{employee.phone}}</td> <td>{{employee.age}}</td> </tr> </table> </div> </body>
angular.module('orderByExample3', []) .controller('ExampleController', ['$scope', 'orderByFilter', function($scope, orderBy) { var employees = [ {name: 'Tam', phone: '123456', age: 15}, {name: 'Quan', phone: '987612', age: 20}, {name: 'Linh', phone: '321223', age: 21}, {name: 'Huan', phone: '555878', age: 35}, {name: 'Khanh', phone: '551235', age: 29} ]; $scope.propertyName = 'age'; $scope.reverse = true; $scope.employees = orderBy(employees, $scope.propertyName, $scope.reverse); $scope.sortBy = function(propertyName) { $scope.reverse = (propertyName !== null && $scope.propertyName === propertyName) ?
