AngularJS: Filter trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Filter có thể được thêm vào AngularJS để định dạng (format) dữ liệu.

Các loại filter trong AngularJS

AngularJS cung cấp các loại filter sau để chuyển đổi dữ liệu:

  • currency Chuyển số sang dạng tiền tệ.
  • date Chuyển ngày sang định dạng được chỉ định.
  • filter Chọn một tập con từ một mảng.
  • json Định dạng đối tượng thành chuỗi JSON.
  • limitTo Giới hạn một mảng/chuỗi thành một số phần tử/ký tự được chỉ định.
  • lowercase Chuyển chuỗi thành dạng in thường.
  • uppercase Chuyển chuỗi thành chữ in hoa.
  • number Chuyển số thành chuỗi.
  • orderBy Sắp xếp mảng bằng một biểu thức.

Thêm filter vào biểu thức

Filter có thể được thêm vào biểu thức bằng cách sử dụng ký tự | (pipe) nằm trước filter.

Ví dụ sau thêm filter uppercase vao biểu thức để chuyển chuỗi thành chữ in hoa:

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

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

<p>The name is {{ lastName | uppercase }}</p>

</div>

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

</body>
</html>

Còn đây là ví dụ chuyển thành chuỗi in thường:

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

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

<p>The name is {{ lastName | lowercase }}</p>

</div>

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

</body>
</html>

Thêm Filter vào chỉ thị

Filter được thêm vào chỉ thị chẳng hạn như ng-repeat cũng bằng cách sử dụng | đặt trước filter.

Ví dụ

Thêm filter orderBy để sắp xếp mảng:

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

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

<p>Looping with objects:</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:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
});
</script>

</body>
</html>

Filter currency

Filter currency dùng để định dạng tiền tệ với chuỗi số.

Ví dụ:

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

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

<h1>Price: {{ price | currency }}</h1>

</div>

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

<p>The currency filter formats a number to a currency format.</p>

</body>
</html>

Filter filter

Filter filter dùng để lấy một tập con của một mảng.

Filter này có thể sử dụng cho mảng hoặc chuỗi và nó sẽ trả về một mảng hoặc chuỗi con chỉ chứa các mục tương thích với yêu cầu.

Nếu chuỗi cần filter là rỗng thì tương ứng với lấy toàn bộ mảng.

Ví dụ

Trả về các tên chứa ký tự 'i':

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

<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 = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

<p>This example displays only the names containing the letter "i".</p>

</body>
</html>

Lọc một mảng theo dữ liệu người dùng nhập vào

Bằng cách đặt chỉ thị ng-model cho thẻ <input> ta có thể sử dụng giá trị của thẻ này như là một biểu thức trong một filter.

Ví dụ:

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

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

<p>Type a letter in the input field:</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 = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

<p>The list will only consists of names matching the filter.</p>

</body>
</html>

Sắp xếp một mảng dựa trên giá trị nhập vào

Bằng cách thêm chỉ thị ng-click vào cột tiêu đề của bảng ta có thể thực hiện hàm thay đổi thứ tự sắp xếp của mảng.

Ví dụ:

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

<p>Click the table headers to change the sorting order:</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:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
});
</script>

</body>
</html>

Tự tạo filter

Ta có thể tự tạo filter bằng cách đăng ký một hàm filter mới cho module của mình.

Ví dụ

Tạo một filter có tên "myFormat":

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

<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 = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
        ];
});
</script>

<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>

Filter myFormat chuyển tất cả các ký tự có chỉ số chẵn (0, 2, 4, ...) thành dạng ký tự in hoa.

» Tiếp: Service trong AngularJS
« Trước: Scope trong AngularJS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!