AngularJS Filters

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

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

<p>Họ & tên: {{ lastName | uppercase }}</p>

</div>

Chạy

AngularJS filter là gì

Trong AngularJS các filter (hay bộ lọc) được dùng để định dạng dữ liệu của biểu thức và hiển thị giá trị sau khi được định dạng trong trang HTML.

AnguarJS cung cấp các bộ lọc sau:

  • currency định dạng dữ liệu theo kiểu tiền tệ
  • date định dạng theo kiểu ngày tháng
  • filter chọn một số đơn vị trong danh sách cho trước
  • json định dạng 1 đối tượng sang dạng JSON
  • limitTo giới hạn 1 mảng/chuỗi ký tự
  • lowercase định dạng 1 chuỗi về dạng chữ in thường
  • uppercase định dạng 1 chuỗi về dạng chữ in hoa
  • number định dạng số
  • orderBy sắp xếp mảng

Thêm bộ lọc vào biểu thức

Để thêm bộ lọc vào biểu thức AngularJS chúng ta sử dụng ký tự | và theo sau đó là tên của bộ lọc. Ở đoạn code ví dụ phía dưới chúng ta sử dụng filter có tên là uppercase để chuyển các ký tự trong chuỗi về dạng in hoa.

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

<p>Họ và tên: {{ lastName | uppercase }}</p>

</div>

Chạy

Tương tự chúng ta có filter với tên lowercase để chuyển các ký tự trong chuỗi về dạng in thường.

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

<p>Tên đầy đủ là {{ lastName | lowercase }}</p>

</div>

Chạy

Thêm bộ lọc vào chỉ thị

Chúng ta có thể sử dụng bộ lọc vào bên trong các chỉ thị AngularJS. Trong ví dụ dưới đây chúng ta thêm chỉ thị orderBy vào bên trong chỉ thị ng-repeat để sắp xếp các phần tử trong mảng theo chữ cái đầu của tên quốc gia.

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

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

Chạy

Định dạng tiền tệ (currency)

Sử dụng bộ lọc currency để định dạng số về dạng tiền tệ.

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

<h1>Giá: {{ price | currency }}</h1>

</div>

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

Chạy

Bộ lọc filter

Sử dụng bộ lọc filter để lựa chọn ra một tập hợp con các phần tử của 1 mảng.

Bộ lọc filter chỉ có thể áp dụng được trên mảng và nó lọc ra các phần tử phù hợp với điều kiện cho của bộ lọc. Ví dụ sau lọc các phần tử chứa ký tự i.

<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 = ['Janifer Bánh Bèo', 'David Trần Văn Tí',  'Tèo Kuto',  'Đằm Thị Thắm'  ];
});
</script>

Chạy

Lọc mảng dựa trên dữ liệu người dùng nhập vào

Sử dụng chỉ thị ng-model trên trường input chúng ta có thể sử dụng giá trị này như một biểu thức để áp dụng bộ lọc.

Ở ví dụ dưới bạn hãy nhập một số ký tự vào để thấy kết quả hiển thị sau khi áp dụng bộ lọc.


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

<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 = ['Janifer Bánh Bèo', 'David Trần Văn Tí',  'Tèo Kuto',  'Đằm Thị Thắm'  ];
});
</script>

Chạy

Áp dụng bộ lọc dựa trên sự kiện người dùng

Sử dụng chỉ thị ng-clickchúng ta có thể chọn bộ lọc được áp dụng dựa trên sự kiện nhấp chuột của người dùng như trong ví dụ dưới đây:

<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:'Janifer Bánh Bèo',country:'USA'},
    {name:'David Trần Văn Tí',country:'England'},
    {name:'Tèo Kuto',country:'Russia'},
    {name:'Đằm Thị Thắm',country:'Vietnam'},
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Chạy

Tự tạo bộ lọc

Chúng ta cũng có thể tự tạo bộ lọc để sử dụng trong ứng dụng AngularJS. Ở ví dụ dưới đây chúng ta định nghĩa bộ lọc myFormat để chuyển toàn bộ các ký tự đầu tiên của họ, tên và tên đệm sang chữ in hoa và các ký tự còn lại sang in thường.

<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 result = "";
        for (var i = 0; i < x.length; i++) {
            if (i == 0 || x[i-1] == " ") {
                result += x[i].toUpperCase()
            } else {
                result += x[i].toLowerCase();
            }
        }
        return result;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = ['trần văn Tí', 'lÊ văn tèo', 'Mary bánh bèo', 'Jonathan Bánh Đúc'];
});
</script>

Chạy

Ở ví dụ trên chúng ta chạy vòng lặp forqua từng ký tự trong tên của sinh viên sau đó kiểm tra nếu giá trị của khoá i này là 0 (đồng nghĩa với ký tự này sẽ là ký tự đầu trong họ của sinh viên) hoặc ký tự ngay trước đó x[i - 1] là khoảng trắng (đồng nghĩa với ký tự này sẽ là ký tự đầu trong tên đệm hoặc tên của sinh viên) thì chúng ta sẽ in hoa ký tự này (sử dụng thuộc tính toUpperCase()). Ngược lại chúng ta sẽ in thường các ký tự đó (sử dụng thuộc tính toLowerCase()).

AngularJS JavaScript
Thêm Bình Luận: