Сейчас мы с вами научимся применять фильтры.

Что такое фильтры

Фильтры могут применяться на выводе значений переменных таким образом: {{переменная | фильтр}}. В этом случае фильтр что-то сделает со значением переменной перед выводом, например фильтр uppercase переведет строку в верхний регистр.

Кроме того, фильтры применяются в ng-repeat таким образом: ng-repeat="elem in arr | фильтр". В этом случае цикл выведет не все элементы из массива, а элементы в соответствии с фильтром.

Итак, давайте посмотрим, какие полезные фильтры есть в Angular.

Фильтры uppercase и lowercase

Фильтры uppercase и lowercase переводят строки в верхний и нижний регистр соответственно.

Давайте посмотрим на их работу на следующем примере. Пусть дан массив с пользователями:

myApp.controller('MyController', function MyController($scope) {
	$scope.users = ['Коля', 'Вася', 'Петя'];
});

Выведем их в виде списка <ul> так, чтобы имена были в верхнем регистре:

<ul>
	<li ng-repeat="user in users">{{user | uppercase}}</li>
</ul>

Давайте попробуем запустить этот код:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {
				$scope.users = ['Коля', 'Вася', 'Петя'];
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<ul>
			<li ng-repeat="user in users">{{user | uppercase}}</li>
		</ul>
	</body>
</html>

У нас должно получиться следующее:

Вы можете открыть этот пример в отдельной вкладке браузера.

Фильтр lowercase работает аналогично, только переводит строку в нижний регистр.

Фильтр date

Фильтр date позволяет форматировать дату. Дата должна быть в формате 'год-месяц-день' или в формате 'год-месяц-день часы:минуты:секунды' (можно также и объект Date).

Применение: {{переменная | date: формат}}. Формат указывается специальными командами, между которыми могут быть любые разделители.

Что за команды: например, день можно задать так - dd, месяц так - mm, а год - вот так - yyyy.

Пример: дана дата '2017-12-31', давайте выведем из нее день. Это делается так: {{'2017-12-31' | date: 'dd'}} - выведет '31'.

Выведем месяц: {{'2017-12-31' | date: 'mm'}} - выведет '12'.

Выведем год: {{'2017-12-31' | date: 'yyyy'}} - выведет '2017'.

Сменим формат этой даты на 'день.месяц.год': {{'2017-12-31' | date: 'dd.mm.yyyy'}} - выведет '31.12.2017'.

Подробнее по данному фильтру смотрите документацию Angular.

Фильтр orderBy

Фильтр orderBy позволяет сортировать данные при выводе с помощью ng-repeat.

Давайте посмотрим его работу на следующем примере. Пусть дан массив с пользователями:

myApp.controller('MyController', function MyController($scope) {
	$scope.users = [
	{name: 'Коля', age: 20},
	{name: 'Вася', age: 19},
	{name: 'Петя', age: 21},
];
});

Выведем их в виде списка <ul>, отсортировав по возрасту:

<ul>
	<li ng-repeat="user in users | orderBy: 'age'">{{user.name}} - {{user.age}}</li>
</ul>

Давайте попробуем запустить этот код:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {
				$scope.users = [
					{name: 'Коля', age: 20},
					{name: 'Вася', age: 19},
					{name: 'Петя', age: 21},
				];
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<ul>
			<li ng-repeat="user in users | orderBy: 'age'">
				{{user.name}} - {{user.age}}
			</li>
		</ul>
	</body>
</html>

У нас должно получиться следующее:

Вы можете открыть этот пример в отдельной вкладке браузера.

Можно сменить порядок сортировки на обратный, передав второй параметр вот так: orderBy: 'age': true. Значение true меняет порядок на обратный, а значение false - сортировка по возрастанию (это по умолчанию).

Давайте сделаем селект, в котором будет выбираться поле для сортировки, и чекбокс, нажатие на который будет менять порядок сортировки:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {
				$scope.users = [
					{name: 'Коля', age: 20},
					{name: 'Вася', age: 19},
					{name: 'Петя', age: 21},
					{name: 'Анна', age: 27},
					{name: 'Дима', age: 30},
				];
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input type="checkbox" ng-model="reverse">
		<select ng-model="field">
			<option>name</option>
			<option>age</option>
		</select>
		<ul>
			<li ng-repeat="user in users | orderBy: field: reverse">
				{{user.name}} - {{user.age}}
			</li>
		</ul>
	</body>
</html>

У нас должно получиться следующее:

Вы можете открыть этот пример в отдельной вкладке браузера.

Подробнее по данному фильтру смотрите документацию Angular.

Фильтр limitTo

Фильтр limitTo позволяет ограничить количество элементов массива при выводе с помощью ng-repeat. Как пользоваться: {{переменная | limitTo: количество}} или {{переменная | limitTo: количество: начало}}.

Давайте сделаем два инпута: в первый вводится количество пользователей, которое следует показать, а во второй - с какого пользователя показывать:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {
				$scope.users = [
					{name: 'Коля', age: 20},
					{name: 'Вася', age: 19},
					{name: 'Петя', age: 21},
					{name: 'Анна', age: 27},
					{name: 'Дима', age: 30},
				];
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input ng-model="number">
		<input ng-model="start">
		<ul>
			<li ng-repeat="user in users | orderBy: number: start">
				{{user.name}} - {{user.age}}
			</li>
		</ul>
	</body>
</html>

У нас должно получиться следующее:

Вы можете открыть этот пример в отдельной вкладке браузера.

Подробнее по данному фильтру смотрите документацию Angular.

Фильтр filter

Фильтр filter позволяет реализовать поиск по массиву.

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

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {
				$scope.users = [
					{name: 'Коля', age: 20},
					{name: 'Костя', age: 19},
					{name: 'Вадим', age: 21},
					{name: 'Владимир', age: 27},
					{name: 'Дима', age: 30},
				];
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input ng-model="search">
		<ul>
			<li ng-repeat="user in users | filter: search">
				{{user.name}} - {{user.age}}
			</li>
		</ul>
	</body>
</html>

У нас должно получиться следующее:

Вы можете открыть этот пример в отдельной вкладке браузера.

Подробнее по данному фильтру смотрите документацию Angular.

Другие фильтры

Смотрите также фильтры number, currency, json.