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.
- uppercase: Convert text to uppercase.
- lowercase: Convert text to lowercase.
- currency: Currency format format text.
- filter: Filter the array, the result is a substring based on the conditions provided.
- 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
Ví dụ về AngularJS từ QTMng-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 }}
After running the above code, you will get the following result:
The Filter in AngularJS Picture 1
According to Tutorialspoint
Previous article: What is AngularJS?
Next lesson: Create a table in AngularJS
You should read it
- Multilingual (i18n) in AngularJS
- What is AngularJS?
- Instructions for installing AngularJS
- The Service in AngularJS
- Directive in AngularJS
- Ajax in AngularJS
- Form in AngularJS
- 4 types of professional filters should be available when taking photos
- The Module in AngularJS
- View components in AngularJS
- HTML DOM element in AngularJS
- Create the first AngularJS application