AngularJS - Lọc: Hướng dẫn thân thiện về Chuyển đổi Dữ liệu

Xin chào bạn, ngôi sao lập trình tương lai! ? Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các bộ lọc AngularJS. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ ở đây cùng bạn, giải thích từng bước một. Cuối cùng của bài hướng dẫn này, bạn sẽ lọc dữ liệu như một chuyên gia!

Filters trong AngularJS là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu bộ lọc là gì. Hãy tưởng tượng bạn có một cây c这支魔法 có thể ngay lập tức chuyển đổi dữ liệu. Đó chính xác là điều mà các bộ lọc làm trong AngularJS! Chúng lấy dữ liệu của bạn và trình bày nó dưới một định dạng khác mà không thay đổi dữ liệu gốc. Đẹp phải không?

Bây giờ, hãy cùng khám phá một số bộ lọc phổ biến nhất trong AngularJS.

Bộ lọc Uppercase: Tôn vinh sự vĩ đại

Chức năng của nó

Bộ lọc uppercase làm chính xác điều mà tên của nó暗示 - nó chuyển đổi tất cả các ký tự trong một chuỗi thành chữ hoa.

Cách sử dụng

<p>{{ "hello, world!" | uppercase }}</p>

Output

HELLO, WORLD!

Giải thích

Trong ví dụ này, chúng ta bắt đầu với chuỗi chữ thường "hello, world!". Ký hiệu | giống như một ống ma thuật gửi văn bản của chúng ta qua bộ lọc uppercase. Kết quả là gì? Một "HELLO, WORLD!" tự hào!

Bộ lọc Lowercase: Giữ cho mọi thứ bình dị

Chức năng của nó

Như bạn có thể đoán, bộ lọc lowercase làm ngược lại với uppercase - nó chuyển đổi tất cả các ký tự thành chữ thường.

Cách sử dụng

<p>{{ "SHOUT OUT TO ANGULARJS!" | lowercase }}</p>

Output

shout out to angularjs!

Giải thích

Ở đây, chúng ta bắt đầu với một chuỗi toàn chữ hoa. Bộ lọc lowercase hạ thấp âm lượng, mang lại cho chúng ta một "shout out to angularjs!" bình dị hơn.

Bộ lọc Currency: Hãy cho tôi thấy tiền!

Chức năng của nó

Bộ lọc currency định dạng một số thành tiền tệ. Mặc định, nó sử dụng ký hiệu đô la, nhưng bạn có thể tùy chỉnh nó.

Cách sử dụng

<p>{{ 9.99 | currency }}</p>
<p>{{ 9.99 | currency:"€" }}</p>

Output

$9.99
€9.99

Giải thích

Trong dòng đầu tiên, chúng ta định dạng 9.99 thành đô la Mỹ. Trong dòng thứ hai, chúng ta yêu cầu bộ lọc sử dụng ký hiệu Euro thay vào đó. Thật kỳ diệu phải không?

Bộ lọc Filter: Tìm kim trong bông

Chức năng của nó

Bộ lọc filter giúp bạn tìm kiếm trong các mảng và trả về các mục khớp.

Cách sử dụng

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | filter:{name:'o'}">
{{friend.name}}
</li>

Output

John

Giải thích

Ở đây, chúng ta đang tìm kiếm trong mảng bạn bè của chúng ta cho tên chứa 'o'. Chỉ có John khớp, vì vậy anh ta là người duy nhất được hiển thị.

Bộ lọc OrderBy: Sắp xếp mọi thứ theo thứ tự

Chức năng của nó

Bộ lọc orderBy sắp xếp một mảng dựa trên một hoặc nhiều tiêu chí.

Cách sử dụng

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | orderBy:'age'">
{{friend.name}} - {{friend.age}}
</li>

Output

John - 25
Mary - 28
Peter - 35

Giải thích

Trong ví dụ này, chúng ta đang sắp xếp bạn bè của chúng ta theo tuổi tăng dần. Nếu chúng ta muốn thứ tự giảm dần, chúng ta có thể sử dụng '-age' thay vào đó.

Kết hợp tất cả: Một ví dụ ấn tượng

Bây giờ, hãy kết hợp nhiều bộ lọc để xem sức mạnh của chúng khi sử dụng cùng nhau!

<script>
$scope.products = [
{name:'Laptop', price:999.99},
{name:'Smartphone', price:599.99},
{name:'Tablet', price:299.99}
];
</script>

<input type="text" ng-model="searchText">
<table>
<tr>
<th>Tên</th>
<th>Giá</th>
</tr>
<tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
<td>{{product.name | uppercase}}</td>
<td>{{product.price | currency}}</td>
</tr>
</table>

Giải thích

1. Chúng ta bắt đầu với một mảng sản phẩm.
2. Chúng ta tạo một trường nhập liệu được liên kết với searchText bằng cách sử dụng ng-model.
3. Trong bảng của chúng ta, chúng ta sử dụng ng-repeat để lặp qua các sản phẩm.
4. Chúng ta áp dụng bộ lọc filter để tìm kiếm dựa trên searchText.
5. Sau đó, chúng ta sử dụng orderBy để sắp xếp kết quả theo giá.
6. Cho mỗi sản phẩm, chúng ta hiển thị tên bằng chữ hoa và giá được định dạng thành tiền tệ.

Ví dụ này kết hợp tìm kiếm, sắp xếp và định dạng tất cả trong một!

Kết thúc

Chúc mừng! Bạn đã vừa bước những bước đầu tiên vào thế giới của các bộ lọc AngularJS. Nhớ rằng, bộ lọc là như một nhà tạo mẫu cá nhân cho dữ liệu của bạn - chúng giúp trình bày thông tin của bạn theo cách phù hợp và hấp dẫn nhất có thể.

Khi bạn tiếp tục hành trình với AngularJS, bạn sẽ khám phá nhiều cách khác để sử dụng bộ lọc để làm cho ứng dụng của bạn shine. Hãy tiếp tục thực hành, 保持好奇心, và quan trọng nhất, hãy vui vẻ! Trước khi bạn biết, bạn sẽ tạo ra các ứng dụng web tuyệt vời làm mọi người ngạc nhiên.

Chúc may mắn, ngôi sao AngularJS tương lai! ?

Bộ lọc	Mục đích	Cú pháp
uppercase	Chuyển đổi chuỗi thành chữ hoa	{{ expression
lowercase	Chuyển đổi chuỗi thành chữ thường	{{ expression
currency	Định dạng số thành tiền tệ	{{ expression
filter	Chọn một tập con của các mục từ mảng	{{ mảng
orderBy	Sắp xếp mảng theo biểu thức	{{ mảng

Credits: Image by storyset