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

AngularJS - Фильтры

Категория: AngularJS
Просмотров: 3667

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

Внимание!!!

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

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))
# Имя Описание
1uppercaseпреобразует текст в текст верхнего регистра.
2lowercaseпреобразует текст в текст нижнего регистра.
3currencyформатирует текст в формате валюты.
4filterфильтруйте массив на его подмножество на основе предоставленных критериев.
5orderbyзаказывает массив на основе предоставленных критериев.

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>
         

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



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok