The Filter in AngularJS

Filter is used to change, filtering data to result in another string. Below is a list of common filters commonly used in AngularJS.

1. uppercase: Convert text to uppercase.
2. lowercase: Convert text to lowercase.
3. currency: Currency format format text.
4. filter: Filter the array, the result is a substring based on the conditions provided.
5. orderby: Arrange arrays based on the information provided

Uppercase filter in AngularJS

Add uppercase filter to an expression, according to the usage below, the student's name field results will be printed in all letters.

 Enter last name: < input type = "text" ng - model = "sinhvien.ho" > Enter the name : < input type = "text" ng - model = "sinhvien.ten" > Print name: {{ sinhvien . hoten () | uppercase }} 

Lowercase filter in AngularJS

Add a lowercase filter to an expression. Below is an example for the filter with the output being all lowercase characters.

 Type : < input type = "text" ng - model = "sinhvien.ho" > Copy ten : < input type = "text" ng - model = "sinhvien.ten" > Ten transactions : {{ studentvien . hoten () | lowercase }} 

Currency filter in AngularJS

Add the currency filter to an expression. Below is an example for the currency filter that returns results in currency format.

 Non-standard : < input type = "text" ng - model = "sinhvien.hocphi" > hocphi : {{ sinhvien . hocphi | currency }} 

Filter filter in AngularJS

To display only the required Subjects, we use tenMonHoc as a filter.

 Monology : < input type = "text" ng - model = "tenMonHoc" > Mon study : < query - repeat = "printable version ten + ', diemthi:' + monhoc . diemthi }} li > ul > 

Filter orderby in AngularJS

To sort Subjects by score, we use orderBy diemthi.

 Mon learn :  {{ monhoc . ten + ', diemthi:' + monhoc . diemthi }} li > ul > 

Example AngularJS

Here is a complete example of the filters illustrated above:

 Filter trong AngularJS  src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > 

 Ví dụ về AngularJS từ QTM  ng-app = "mainApp" ng-controller = "studentController" >  border = "0" > Nhập tên:  type = "text" ng-model = "student.firstName" > Nhập họ:  type = "text" ng-model = "student.lastName" > Nhập học phí:  type = "text" ng-model = "student.fees" > Nhập môn học:  type = "text" ng-model = "subjectName" > 
  border = "0" > Tên in hoa: {{student.fullName() | uppercase}} Tên viết thường: {{student.fullName() | lowercase}} Học phí: {{student.fees | currency}} Môn học:  ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'diem'" > {{ subject.name + ', diem:' + subject.diem }}