Bộ lọc AngularJS

Bạn có thể thêm bộ lọc vào AngularJS để định dạng dữ liệu.

Bộ lọc AngularJS

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

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

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

Bạn có thể sử dụng dấu管道 | để thêm bộ lọc vào biểu thức, sau đó là một bộ lọc.

uppercase Bộ lọc sẽ định dạng chuỗi thành chữ hoa:

Mẫu

<div ng-app="myApp" ng-controller="personCtrl">
<p>Tên là {{ lastName | uppercase }}</p>
</div>

Thử ngay

lowercase Bộ lọc sẽ định dạng chuỗi thành chữ thường:

Mẫu

<div ng-app="myApp" ng-controller="personCtrl">
<p>Tên là {{ lastName | lowercase }}</p>
</div>

Thử ngay

Thêm bộ lọc vào câu lệnh

Bằng cách sử dụng ký tự ống dẫn | theo sau bộ lọc, có thể thêm bộ lọc vào câu lệnh, ví dụ ng-repeat：

Mẫu

Bộ lọc orderBy sẽ sắp xếp mảng:

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

Thử ngay

Bộ lọc currency

currency Bộ lọc sẽ định dạng số thành tiền tệ:

Mẫu

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Giá: {{ price | currency }}</h1>
</div>

Thử ngay

Để biết thêm thông tin về bộ lọc currency, hãy xem tài liệu tham khảo bộ lọc currency của AngularJS.

Bộ lọc filter

filter Bộ lọc chọn tập con của mảng.

filter Bộ lọc chỉ có thể được sử dụng cho mảng, nó trả về một mảng chỉ chứa các phần tử khớp.

Mẫu

Trả về tên chứa chữ cái "i":

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

Thử ngay

Để biết thêm thông tin về bộ lọc filter, hãy xem tài liệu tham khảo bộ lọc filter của AngularJS.

Lọc mảng dựa trên đầu vào của người dùng

Bằng cách thiết lập ng-model Câu lệnh, chúng ta có thể sử dụng giá trị của trường nhập làm biểu thức trong bộ lọc.

Nhập một chữ cái vào trường nhập, danh sách sẽ được thu hẹp hoặc mở rộng dựa trên phần trùng khớp:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

Mẫu

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

Thử ngay

Sắp xếp mảng dựa trên đầu vào của người dùng

Bấm vào tiêu đề bảng để thay đổi thứ tự sắp xếp:

Bằng cách thêm vào tiêu đề bảng ng-click Câu lệnh, chúng ta có thể chạy một hàm, hàm đó sẽ thay đổi thứ tự sắp xếp của mảng:

Mẫu

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

Thử ngay

Bộ lọc tùy chỉnh

Bạn có thể tạo bộ lọc của riêng mình bằng cách đăng ký một hàm nhà máy bộ lọc mới cho mô-đun:

Mẫu

Tạo một bộ lọc tùy chỉnh có tên là "myFormat":

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

Thử ngay

myFormat Bộ lọc sẽ định dạng in hoa mỗi ký tự thứ hai.