Nó thường dùng để chuyển đổi dữ liệu hiển thị lên HTML mà k làm thay đổi giá trị của biến.
<div ng-app="" ng-init="ten='Quang Lê'">
<p>
Xin chào {{ten | uppercase}}
</div>
Kết quả:
Xin chào Quang Lê
Ví dụ dưới đây dùng currency để định dạng tiền tệ.
<div ng-app="" ng-init="soluong=1;gia=10">
<p>
Tổng cộng = {{ (soluong * gia) | currency }}</p>
</div>
Kết quả
Tổng cộng = $10.00
Thêm bộ lọc vào chỉ thị
Bộ lọc được thêm vào chỉ thị trên HTML bằng cách viết sau ký tự "|", và giá trị được viết sau dấu hai chấm ":".
Ví dụ dưới đây dùng orderBy để sắp xếp một mảng và filter để lọc giá trị trong mảng.
<div ng-app="myApp" ng-controller="myCtrl">
<p>
<input type="text" ng-model="test">
</p>
<ul>
<li ng-repeat="x in danhSach | filter:test | orderBy:'ten'">{{ (x.ho | uppercase) +
': ' + x.ten }} </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.danhSach = [
{ ho: 'Tổng Thống Mỹ', ten: 'Barack Obama' },
{ ho: 'Phó Tổng thống Mỹ', ten: 'Joe Biden' },
{ ho: 'Chủ tịch nước Việt Nam', ten: 'Trần Đại Quang' },
{ ho: 'Thủ tướng nước Việt Nam', ten: 'Nguyễn Xuân Phúc' },
{ ho: 'Tổng thống Nga', ten: 'Vladimir Vladimirovich Putin' }
]
});
</script>
Sử dụng filter trong Javascript
Bạn có thể sử dụng filter trong controller, directive ... bằng cách gọi đối tượng $filter mà Angular cung cấp.
Cú pháp: $filter('<tên filter>')(<Giá trị cần filter>), sẽ trả về giá trị sau khi được filter.
angular.module('myApp', [])
.controller('MainCtrl', function($scope, $filter) {
$scope.originalText = 'hello';
$scope.filteredText = $filter('uppercase')($scope.originalText);
});
Giá trị của $scope.filteredText là HELLO.
Định nghĩa một bộ lọc
Để định nghĩa một bộ lọc, bạn cần định nghĩa angular module trước. Thử ví dụ sau:
<div ng-app="myApp" ng-controller="myCtrl">
<p>
<input type="radio" ng-model="test" value="odd">
Odd number
<input type="radio" ng-model="test" value="even">
Even number
<input type="radio" ng-model="test" value="other" checked>
Other number
</p>
<ul>
<li ng-repeat="num in numbers | isOdd: test">{{num}} </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.filter('isOdd', function () {
return function (numbers, condition) {
if (condition === 'odd') {
return numbers.filter(function (num) {
return (num % 2) !== 0;
});
}
if (condition === 'even') {
return numbers.filter(function (num) {
return (num % 2) === 0;
});
}
return numbers;
};
});
app.controller('myCtrl', function ($scope) {
$scope.test = 'other';
$scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
});
</script>
Giải thích ví dụ:
- app.filter('isOdd', function() {}) Định nghĩa filter tên là isOdd. Nó trả về một function với các tham số.
- numbers là giá trị mà ta cần filter trên HTML.
- condition là điều kiện để ta filter.
Chúng ta có thể truyền nhều điều kiện để filter bằng cách sau:
<li ng-repeat="num in numbers | isOdd: test : otherCondition"></li>
otherCondition là tham số thứ 2 truyền vào filter sau tham số test
Trong filter ta sử dụng otherCondition là tham số thứ 3 của hàm đươc trả về
return function(numbers, condition, otherCondition)