[AngularJS] Phần 9: Bộ lọc trong AngularJS

175 lượt xem

Trong bài viết này, chúng ta sẽ tìm hiểu về các bộ lọc (filter) trong AngularJS.

Bộ lọc trong AngularJS
AngularJS cung cấp các bộ lọc để chuyển đổi dữ liệu:

  • currency – định dạng tiền tệ
  • date – định dạng ngày tháng
  • filter – chọn 1 tập con các phần tử từ 1 mảng
  • json – định dạng 1 đối tượng thành kiểu chuỗi JSON
  • limitTo – giới hạn 1 chuỗi/mảng thành theo số ký tự/phần tử cụ thể
  • lowercase – định dạng chữ thường
  • uppercase – định dạng chữ hoa
  • number – định dạng số
  • orderBy – sắp xếp 1 mảng theo thứ tự

Thêm các bộ lọc vào các diễn giải
Các bộ lọc có thể được thêm vào các diễn giải bằng cách dùng ký tự gạch đứng |, theo sau là 1 bộ lọc. Bộ lọc chữ thường định dạng các chuỗi thành chuỗi có ký tự viết hoa và viết thường:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>Tên tôi viết hoa là {{ lastName | uppercase }}</p>
<p>Tên tôi viết thường là {{ lastName | lowercase }}</p>

</div>

<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Dammio",
    $scope.lastName = "Ta"
});
</script>

</div>
</body>
</html>

Thêm các bộ lọc vào các chỉ thị (directives)
Các bộ lọc được thêm vào các chỉ thị (ví dụ như ng-repeat) cũng bằng cách dùng ký tự gạch đứng |, theo sau là 1 bộ lọc. Ví dụ sau sắp xếp 1 mảng theo bộ lọc orderBy.

<div ng-app="myApp" ng-controller="namesCtrl">

<p> Vòng lặp với các đối tượng:</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:'Sammi',country:'France'},
        {name:'Alonso',country:'England'},
        {name:'Tao Zu',country:'Japan'},
        {name:'Nguyen',country:'Vietnam'},
        {name:'Helmi',country:'Finland'},
        ];
});
</script>

Bộ lọc tiền tệ (currency)
Bộ lọc tiền tệ định dạng 1 số thành kiểu tiền tệ. Mặc định là định dạng theo đơn vị USD (ví dụ 15 -> $15.00).

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Kiểu tiền tệ USD: {{ price | currency }}</h1>

<h1>Kiểu tiền tệ VND: {{ price | currency : "VND" : 3 }}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
    $scope.price = 15;
});
</script>

</div>

Bộ lọc filter
Bộ lọc filter chọn 1 tập con của 1 mảng. Bộ lọc này chỉ sử dụng được cho mảng, và kết quả trả về là 1 mảng chứa các phần tử hợp lệ với bộ lọc. Ví dụ sau trả về tên của 1 mảng chứa ký tự “t”, không phân biệt hoa thường.

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | filter : 't'">
    {{ x }}
  </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Tuan',
        'Viet',
        'John',
        'Alonso',
        'Dammio'
    ];
});
</script>

Lọc 1 mảng dựa trên trường dữ liệu nhập vào
Bằng cách thiết lập chỉ thị ng-model trên trường nhập liệu, chúng ta có thể dùng giá trị trường nhập liệu như 1 diễn giải ở bộ lọc. Ví dụ sau mô tả cách nhập dữ liệu vào 1 trường dữ liệu, và danh sách cho ra các kết quả khớp với dữ liệu đầu vào.

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Gõ 1 ký tự vào trường nhập liệu:</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 = [
        'Dammio',
        'Dane',
        'Frey',
        'Hani',
        'John',
        'George',
        'Akami',
        'Tom',
        'Ubis'
    ];
});
</script>

Sắp xếp 1 mảng dựa trên trường nhập liệu đầu vào
Bằng cách thêm vào chỉ thị ng-click ở đầu vào bảng, chúng ta có thể chạy 1 hàm cho phép thay đổi thứ tự sắp xếp trên 1 mảng. Ví dụ sau chúng ta có mảng names với 2 thuộc tính name và country. Khi hiển thị ở giao diện HTML, chúng ta dùng chỉ thị ng-click để mô tả biến cần sắp xế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:'Joyei',country:'Vietnam'},
    {name:'Colue',country:'Sweden'},
    {name:'Mason',country:'Korea'},
    {name:'Hoye',country:'Norway'},
    {name:'Jiff',country:'Denmark'},
    {name:'Geyr',country:'Thailand'},
    {name:'Van',country:'Denmark'},
    {name:'Thang',country:'England'},
    {name:'Kai',country:'Japan'}
     ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Bộ lọc tự tạo
Chúng ta có thể tự tạo các bộ lọc riêng bằng cách thêm 1 hàm lọc trong module của ứng dụng. Ví dụ sau mô tả 1 bộ lọc gọi là “myFormat” để viết hoa các ký tự ở vị trí chẵn trong 1 chuỗi.

<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 = ['Dammio', 'Baby', 'Mary', 'Hendeson', 'Kittyoe'];});
</script>

Kết luận: Bài viết đã trình bày các bộ lọc cơ bản ở AngularJS, bạn có thể tìm hiểu thêm và xây dựng các bộ lọc cho riêng mình, tùy theo ứng dụng thực tế.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz