AngularJS - Фильтры

: AngularJS; 30 июля 2018; 04 февраля 2019; Просмотров: 3933

AngularJS - Фильтры

Фильтры в AngularJS используются для изменения изменений данных и могут быть помечены в выражениях или директивах с использованием символа канала. Ниже приведен список часто используемых фильтров.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Google Chrome

Mozilla Firefox

Yandex

#	Имя	Описание
1	uppercase	преобразует текст в текст верхнего регистра.
2	lowercase	преобразует текст в текст нижнего регистра.
3	currency	форматирует текст в формате валюты.
4	filter	фильтруйте массив на его подмножество на основе предоставленных критериев.
5	orderby	заказывает массив на основе предоставленных критериев.

uppercase

Добавьте фильтр верхнего регистра в выражение с использованием символа pipe. Здесь мы добавили фильтр верхнего регистра, чтобы напечатать имя студента заглавными буквами.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

lowercase

Добавьте строчный фильтр в выражение с использованием символа pipe. Здесь мы добавили фильтр нижнего регистра, чтобы напечатать имя студента во всех строчных буквах.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

currency

Добавьте фильтр валюты в выражение, возвращающее число, используя символ канала. Здесь мы добавили фильтр валют для печати сборов с использованием валютного формата.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

filter

Для отображения только требуемых предметов мы использовали subjectName как фильтр.

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
  <li ng-repeat = "subject in student.subjects | filter: subjectName">
     {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>

orderBy

Чтобы заказывать предметы по маркам, мы использовали знаки orderBy.

Subject:
<ul>
  <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
     {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>

Пример

В следующем примере будут показаны все вышеупомянутые фильтры.

testAngularJS.htm
<html>
  
   <head>
      <title>Angular JS Filters</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
  
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
           
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
           
            <tr>
               <td>Enter fees: </td>
               <td><input type = "text" ng-model = "student.fees"></td>
            </tr>
           
            <tr>
               <td>Enter subject: </td>
               <td><input type = "text" ng-model = "subjectName"></td>
            </tr>
         </table>
         <br/>
        
         <table border = "0">
            <tr>
               <td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
            </tr>
        
            <tr>
               <td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
            </tr>
        
            <tr>
               <td>fees: </td><td>{{student.fees | currency}}
               </td>
            </tr>
                                                
            <tr>
               <td>Subject:</td>
 
               <td>
                  <ul>
                     <li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
                        {{ subject.name + ', marks:' + subject.marks }}
                     </li>
                  </ul>
               </td>
            </tr>
         </table>
        
      </div>
     
      <script>
         var mainApp = angular.module("mainApp", []);
        
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Ivan",
               lastName: "Ivanov",
               fees:500,
              
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65}
               ],
              
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
     
   </body>
</html>

AngularJS Sample Application

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

Tags: web, AngularJS

Компьютерапия