Cоздание собственных фильтров

Последнее обновление: 26.04.2017

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

Определение фильтра

Фильтр по сути представляет функцию, которая выполняется над переданным значением. Ее типизированное представление выглядит следующим образом:

module.filter('filter_name', function(){
     return function(param){
	    // некоторые действия над param
		return some_value;
    }
})

В этой конструкции module - название модуля приложения. filter_name - произвольное название функции фильтра. Параметр возвращаемой функции - param - параметр, над которым будут производиться действия. И some_value - некоторое возвращаемое значение. В качестве значения может выступать текст самого параметра или какое-то иное значение. Посмотрим на примере.

Для начала создадим модуль в отдельном файле - назовем его app.js и положим в папку js:

var questApp = angular.module('questApp', []);

Затем изменим контроллер QuestionController:

questApp.controller('QuestionController', 
	function QuestionController($scope){
	
		$scope.question={
			text: 'Какой js-фреймворк лучше использовать?',
			author: 'Иван Иванов',
			date: '20/10/2013',
			answers: 
			[{
				text: 'AngularJS!',
				author: 'Вова Сидоров',
				date: '20/10/2013',
				rate:2
			},{
				text: 'AngularJS лучше всех',
				author: 'Олег Кузнецов',
				date: '21/10/2013',
				rate:3
			},{
				text: 'фигасе квестшен',
				author: 'Неизвестный',
				date: '22/10/2013',
				rate:0
			}]
		},
	
		$scope.voteUp = function (answer){
			answer.rate++;
		};
		$scope.voteDown = function (answer){
			answer.rate--;
		};
	}
)

Теперь создадим фильтр. Его задачей будет фильтрация сообщений, и если сообщение содержит некорректное выражение, то его заменяем звездочками. Для этого создадим отдельный файл filter.js в каталоге js со следующим содержанием:

questApp.filter('formatText', function(){
	return function(text){
		if(text.indexOf("фигасе")!==-1){
			return "***";
		}
		else{
			return text;
		}
	}
})

В итоге проект будет выглядеть следующим образом:

AngularJS и создание своих фильтров

И теперь определим html-страницу, где будет происходить все это безобразие:

<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div  ng-controller="QuestionController">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers" class="answer">
<div class="vote">
    <a class="vote-up" ng-click="voteUp(answer)"></a>
    <span class="rate">{{answer.rate}}</span>
    <a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text | formatText}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/QuestionController.js"></script>
<script src="js/filter.js"></script>
</body>
</html>

Загрузить проект

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850