Фильтры AngularJS

Фильтры могут быть добавлены в AngularJS для форматирования данных.

Фильтры AngularJS

AngularJS предоставляет фильтры для преобразования данных:

• currency Форматирование числа в формат货币
• date Форматирование даты в указанном формате
• filter Выбор подмножества из массива
• json Форматирование объекта в строку JSON
• limitTo Ограничение массива/строки до указанного количества элементов/символов
• lowercase Форматирование строки в нижний регистр
• number Форматирование числа в строку
• orderBy Сортировка массива через выражение
• uppercase Форматирование строки в верхний регистр

Добавление фильтра к выражению

Фильтр может быть добавлен к выражению с помощью символы管道 | и затем фильтр.

uppercase Фильтр форматирует строку в верхний регистр:

Пример

<div ng-app="myApp" ng-controller="personCtrl">
<p>Имя {{ lastName | uppercase }}</p>
</div>

Попробуйте сами

lowercase Фильтр форматирует строку в нижний регистр:

Пример

<div ng-app="myApp" ng-controller="personCtrl">
<p>Имя: {{ lastName | lowercase }}</p>
</div>

Попробуйте сами

добавить фильтр к директиве

через использование знака管道 | следом за фильтром, можно добавить фильтр к директиве, например ng-repeat:

Пример

Фильтр orderBy сортирует массив:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Попробуйте сами

currency фильтр

currency Фильтр форматирует цифры как деньги:

Пример

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Цена: {{ price | currency }}</h1>
</div>

Попробуйте сами

Для получения дополнительной информации о фильтре currency обратитесь к нашему руководству по фильтрам AngularJS

filter фильтр

filter Фильтр выбирает подмножество массива.

filter Фильтр может использоваться только для массивов, он возвращает массив, содержащий только соответствующие элементы.

Пример

Вернуть имена, содержащие букву "i":

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

Попробуйте сами

Для получения дополнительной информации о фильтре filter обратитесь к нашему руководству по фильтрам AngularJS

Фильтруйте массив в зависимости от ввода пользователя

через установку ng-model Инструкции, мы можем использовать значение поля ввода в качестве выражения фильтра.

В поле ввода введите букву, список будет сужен или расширен в зависимости от соответствия:

• Яни
• Карл
• Маргareth
• Хейге
• Джо
• Густав
• Биргит
• Мэри
• Кай

Пример

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter : test">
    {{ x }}
  </li>
</ul>
</div>

Попробуйте сами

Сортируйте массив в зависимости от ввода пользователя

Нажмите на заголовок таблицы, чтобы изменить порядок сортировки:

через добавление в заголовок таблицы ng-click Инструкции, мы можем запустить функцию, которая изменяет порядок сортировки массива:

Пример

<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  };
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Попробуйте сами

Пользовательский фильтр

Вы можете создать новый фильтр, зарегистрировав новый фабричный функционал фильтра в модуле:

Пример

Создайте пользовательский фильтр с именем "myFormat":

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
  return function(x) {}}
    var i, c, txt = "";
    for (i = 0; i < x.length; i++) {
      c = x[i];
      if (i % 2 == 0) {
        c = c.toUpperCase();
      }
      txt += c;
    }
    return txt;
  });
});
app.controller('namesCtrl', function($scope) {
  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

Попробуйте сами

myFormat Фильтр будет форматировать каждый второй символ为大写.