Các Filter trong AngularJS | 26 bài hướng dẫn AngularJs miễn phí

http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Các Filter (bộ lọc) AngularJS Filter sử dụng để thay đổi, lọc liệu cho kết chuỗi khác Dưới danh sách filter thông dụng thường sử dụng STT Tên Miêu tả uppercase Chuyển đổi văn sang dạng chữ hoa lowercase Chuyển văn sang dạng chữ thường currency Định dạng văn dạng tiền tệ filter Lọc mảng, kết chuỗi dựa điều kiện cung cấp orderby Sắp xếp mảng dựa vào thông tin cung cấp Bộ lọc uppercase Thêm uppercase filter vào expression, theo cách sử dụng đây, kết trường tên sinh viên in hoa tất ký tự Enter first name: Enter last name: Name in Upper Case: {{student.fullName() | uppercase}} Bộ lọc lowercase Thêm lowercase filter vào expression Dưới ví dụ cho lọc với đầu tất ký tự thường Enter first name: Enter last name: Name in Upper Case: {{student.fullName() | lowercase}} Bộ lọc currency Thêm currency filter vào expression Dưới ví dụ cho lọc currency trả kết định dạng tiền tệ Enter fees: fees: {{student.fees | currency}} http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Bộ lọc filter Để hiển thị subject yêu cầu, sử dụng subjectName filter Enter subject: Subject:

• {{ subject.name + ', marks:' + subject.marks }}

Bộ lọc orderby Để xếp subject theo điểm số, sử dụng orderBy marks Subject:

• {{ subject.name + ', marks:' + subject.marks }}

Ví dụ Dưới ví dụ hồn chỉnh cho minh họa bên trên: testAngularJS.jsp Angular JS Filters AngularJS Sample Application http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com Enter first name: Enter last name: Enter fees: Enter subject: Name in Upper Case: {{student.fullName() | uppercase}} Name in Lower Case: {{student.fullName() | lowercase}} fees: {{student.fees | currency}} Subject:

• {{ subject.name + ', marks:' + subject.marks }}

var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65} ], fullName: function() { http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/angularjs/index.jsp Copyright © vietjack.com var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); Kết Mở trang textAngularJS.jsp trình duyệt web Và xem kết http://vietjack.com/ Trang chia sẻ học online miễn phí Page ...http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com Bộ lọc filter Để hiển thị subject yêu cầu, sử dụng subjectName filter Enter subject: ... student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} Ví dụ Dưới ví dụ hồn chỉnh cho minh họa bên trên: testAngularJS.jsp Angular JS Filters... ng-controller="studentController"> http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com /angularjs/ index.jsp Copyright © vietjack.com Enter first name: