AngularJS tut 9: Bộ lọc AngularJS

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

Bộ lọc AngularJS

AngularJS cung cấp các 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 thành một định dạng được chỉ định.
• filter Chọn một tập hợp con các mục từ một mảng.
• json Định dạng một đối tượng thành một 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 Định dạng một chuỗi thành chữ thường.
• number Định dạng một số thành một chuỗi.
• orderBy Sắp xếp một mảng theo một biểu thứ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ể được thêm vào biểu thức bằng cách sử dụng ký tự ống dẫn |, theo sau là bộ lọc.

Các uppercasechuỗi định dạng bộ lọc thành chữ hoa:

Thí dụ

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

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

</div>

Hãy tự mình thử »

Các lowercasechuỗi định dạng bộ lọc thành chữ thường:

Thí dụ

Hãy tự mình thử »

Thêm Bộ lọc vào Chỉ thị

Các bộ lọc được thêm vào các lệnh, chẳng hạn như ng-repeatbằng cách sử dụng ký tự ống dẫn |, theo sau là một bộ lọc:

Thí dụ

Bộ orderBylọc sắp xếp một 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>Hãy tự mình thử »

The currency Filter

Bộ currencylọc định dạng một số dưới dạng tiền tệ:

Thí dụ

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

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

</div>

Hãy tự mình thử »

Đọc thêm về bộ lọc tiền tệ trong Tham khảo bộ lọc tiền tệ AngularJS của chúng tôi

Bộ lọc Filter

Bộ filterlọc chọn một tập hợp con của một mảng.

Bộ filterlọc chỉ có thể được sử dụng trên các mảng và nó trả về một mảng chỉ chứa các mục phù hợp.

Thí dụ

Trả lại các tên có 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>

Hãy tự mình thử »

Đọc thêm về bộ lọc bộ lọc trong Tham khảo bộ lọc bộ lọc AngularJS của chúng tôi

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

Bằng cách đặt ng-modelchỉ thị trên một trường đầu vào, chúng ta có thể sử dụng giá trị của trường đầu vào như một biểu thức trong một bộ lọc.

Nhập một ký tự vào trường nhập và danh sách sẽ thu nhỏ / lớn lên tùy thuộc vào kết quả khớp:

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

Thí dụ

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

Hãy tự mình thử »

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

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

Bằng cách thêm ng-clickchỉ thị trên tiêu đề bảng, chúng ta có thể chạy một hàm thay đổi thứ tự sắp xếp của mảng:

Thí dụ

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

Hãy tự mình thử »

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ý chức năng nhà máy bộ lọc mới với mô-đun của mình:

Thí dụ

Tạo một bộ lọc tùy chỉnh có tên “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>

Hãy tự mình thử »

Bộ myFormatlọc sẽ định dạng mọi ký tự khác thành chữ hoa.

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

Bộ lọc AngularJS

AngularJS cung cấp các 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 thành một định dạng được chỉ định.
• filter Chọn một tập hợp con các mục từ một mảng.
• json Định dạng một đối tượng thành một 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 Định dạng một chuỗi thành chữ thường.
• number Định dạng một số thành một chuỗi.
• orderBy Sắp xếp một mảng theo một biểu thứ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ể được thêm vào biểu thức bằng cách sử dụng ký tự ống dẫn |, theo sau là bộ lọc.

Các uppercasechuỗi định dạng bộ lọc thành chữ hoa:

Thí dụ

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

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

</div>Hãy tự mình thử »

Các lowercasechuỗi định dạng bộ lọc thành chữ thường:

Thí dụ

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

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

</div>Hãy tự mình thử »

Thêm Bộ lọc vào Chỉ thị

Các bộ lọc được thêm vào các lệnh, chẳng hạn như ng-repeatbằng cách sử dụng ký tự ống dẫn |, theo sau là một bộ lọc:

Thí dụ

Bộ orderBylọc sắp xếp một 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>Hãy tự mình thử »

Bộ lọc tiền tệ

Bộ currencylọc định dạng một số dưới dạng tiền tệ:

Thí dụ

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

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

</div>Hãy tự mình thử »

Đọc thêm về bộ lọc tiền tệ trong Tham khảo bộ lọc tiền tệ AngularJS của chúng tôi

Bộ lọc bộ lọc

Bộ filterlọc chọn một tập hợp con của một mảng.

Bộ filterlọc chỉ có thể được sử dụng trên các mảng và nó trả về một mảng chỉ chứa các mục phù hợp.

Thí dụ

Trả lại các tên có 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>Hãy tự mình thử »

Đọc thêm về bộ lọc bộ lọc trong Tham khảo bộ lọc bộ lọc AngularJS của chúng tôi

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

Bằng cách đặt ng-modelchỉ thị trên một trường đầu vào, chúng ta có thể sử dụng giá trị của trường đầu vào như một biểu thức trong một bộ lọc.

Nhập một ký tự vào trường nhập và danh sách sẽ thu nhỏ / lớn lên tùy thuộc vào kết quả khớp:

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

Thí dụ

<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>Hãy tự mình thử »

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

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

Bằng cách thêm ng-clickchỉ thị trên tiêu đề bảng, chúng ta có thể chạy một hàm thay đổi thứ tự sắp xếp của mảng:

Thí dụ

<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>Hãy tự mình thử »

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ý chức năng nhà máy bộ lọc mới với mô-đun của mình:

Thí dụ

Tạo một bộ lọc tùy chỉnh có tên “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>Hãy tự mình thử »

Bộ myFormatlọc sẽ định dạng mọi ký tự khác thành chữ hoa.