Cấp bậc tác giả:

TRAINING

[Angular][Phần 5]AngularJS Filter - Bộ lọc

Được viết bởi webmaster ngày 17/04/2016 lúc 05:31 PM
Bộ lọc được thêm vào biểu thức và chỉ thị trên HTML bằng cách viết sau ký tự "|"
  • 0
  • 7530

[Angular][Phần 5]AngularJS Filter - Bộ lọc

Bộ lọc được thêm vào biểu thức và chỉ thị trên HTML bằng cách viết sau ký tự "|"

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.

FiltersDescription
currencyĐịnh dạng một số thành định dạng tiền tệ.
filterLọc những phần tử của một mảng bằng giá trị cho trước.
lowercaseĐịnh dạng một chuỗi thành chữ thường.
orderBySắp xếp một mảng bởi biểu thức cho trướ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êm vào biểu thức bằng cách viết sau ký tự "|"

Ví dụ dưới đây dùng uppercase để viết hoa chuỗi.

<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)

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML