AngularJS. Пользовательские фильтры в AngularJS

Содержание материала:

Изучаем AngularJS на пяти практических примерах

Скачать рабочие материалы к данной статье

Вы, наверное, слышали уже о AngularJS – JS-фреймворке с открытым исходным кодом, разработанном специалистами Google, который реально меняет представление о веб-приложениях. О нем уже много было написано, но до сих пор в Сети очень трудно найти что-то действительно ориентированное на разработчиков.

Где бы лаконично и конкретно, на практических примерах были описаны принципы работы AngularJS. Цель этой статьи – изменить подобное положение вещей. Ниже приводится описание основных составляющих элементов Angular: Модели,Представления, Контроллеры, Сервисы и Фильтры, созданное на основе пяти конкретных примеров.

Если вы предпочитаете редактировать код через ваш любимый редактор, скачайте ZIP-архив по ссылке выше.

Что такое AngularJS?

По большому счету AngularJS является основой, которая связывает HTML-код (который генерируется для просмотра страницы в окне браузера) с JavaScript объектов /моделей. Когда изменяется один из объектов, автоматически обновляется и генерируемая страница. Верно и обратное — модели связаны с текстовым полем (контентом страницы). Когда изменяется контент, это вызывает изменения и в коде сайта.

AngularJS связывает коды в единую систему, и вам не нужно больше обновлять HTML вручную или инспектировать элементы, как в случае, если вы используете JQuery. В самом деле, ни в одном из примеров, приведенных здесь, даже не упоминается JQuery!

Для использования AngularJS вы должны добавить его в код своей страницы. Для этого в тэг нужно прописать соответствующие параметры. Google’s CDN для более быстрой загрузки рекомендую еще такой код:

AngularJS включает в себя большое количество директив , которые позволяют связать HTML-элементы моделей. Они представляют из себя атрибуты, начинающиеся с префикса ng-, их можно добавлять к любому элементу. Самым важным атрибутом, который, если вы хотите использовать Angular, нужно включить во все страницы сайта является ng- приложений:

Атрибут следует добавлять к элементу, который охватывает нужную нам часть страницы: либо все тело страницы, либо ее часть ограниченную тэгами div. Angular ищет его при загрузке страницы и автоматически оценивает все директивы , которые видит, как дочерние элементы.

Но довольно теории. Давайте рассмотрим непосредственно некоторые коды.

Меню навигации

В качестве первого примера мы создадим меню навигации, в котором выделяется активный элемент. В примере задействованы только директивы AngularJS, это самое простейшее приложение, использующее фреймворк.
Код выглядит следующим образом:

В приведенном выше примере, используются директивы Angular для задания и считывания активной переменной. Когда она изменяется, это инициирует изменения HTML-кода элемента. В терминологии Angular эта переменная называется моделью. Она доступна для всех директив текущей области. Ее также могут обрабатывать контроллеры (подробнее об этом в следующем примере).

Если вы использовали шаблоны JavaScript раньше, то вы знакомы с синтаксисом команды <>. Когда фреймворк видит такую строку, он заменяет содержимое переменной. Эта операция повторяется каждый раз, когда изменяется переменная.

Встроенный редактор

Для второго примера, мы создадим простой встроенный редактор – при нажатии пункта меню всплывает небольшое текстовое поле с подсказкой. Мы используем контроллер, который будет инициализировать модели и задавать два разных метода отображения подсказки. Контроллеры являются стандартными функциями JavaScript, которые автоматически выполняются фреймворком Angular. Они связаны с кодом отображения страницы вашего сайта через директивы ng-controller .

Когда функция контроллера запускается на исполнение, для нее в качестве параметра задается специальный объект $scope. Он отвечает за ввод текста в текстовый редактор. Для того, чтобы вывести его на экран, нужно прописать дополнительные свойства и функции, которые описывают отображение его элементов. С помощью NG-моделей осуществляется связь кода сайта с текстом, который вводится в рабочее поле редактора. При вводе текста Angular задает соответствующие изменения переменных.

Форма заказа

В этом примере мы рассмотрим код формы заказы, в которой автоматически выводится общая сумма. Здесь использована еще одна полезная функция AngularJS — фильтры . Фильтры позволяют вносить изменения в модели, а также объединять их с помощью символа «|». В приведенном ниже примере, используется фильтр валюты , чтобы перевести числовое значение в корректный формат цены — с разделением долларов и центов. Когда вы рассмотрите пример № 4, вы сможете с легкостью задавать свои собственные фильтры.

Связка ng-repeat ( описание ) – это еще один полезный элемент Angular. Она позволяет запустить цикл обработки массива элементов, а также задать разметку для каждого из них. Она автоматически обновляет код, если один из элементов был изменен или удален.

Функция поиска

В этом примере приводится функция, позволяющая фильтровать список элементов по определенному критерию. Это еще одно направление, где с успехом может применяться AngularJS.

Фреймворк является идеальным инструментом для создания пользовательских фильтров. Для этого сперва мы должны сформировать специальный модуль для нашего приложения.

Модули представляют собой форму организации приложений JavaScript в автономные компоненты, которые можно связывать между собою в разных вариантах и последовательностях. Angular также использует этот метод группировки кодов. Потому прежде, чем создавать фильтр, нужно сначала создать модули для разных приложений.

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

  1. Использовать функцию angular.module(«name»,[]) при вызове JS. Это установит границы нового модуля;
  2. Задать имя модуля в качестве значения директивы ng-app.

После этого фильтр создается очень просто функцией filter(). Также просто потом вызвать его через обращение к соответствующему модулю angular.module(«name», []).

В создании различных фильтров используется подход, базирующийся на общей философии AngularJS. В соответствии с ней каждая часть кода, который вы пишете, должна быть автономной, легко тестируемой, а также иметь возможность использоваться разными элементами фреймворка. Вы можете применять созданный однажды фильтр для обработки данных в рамках других приложений. И даже объединять его в последовательности с другими фильтрами.

Функция переключения режима вывода элементов на странице

Еще одна популярная функция – переключение по выбору пользователя различных режимов вывода элементов на странице (список или плитка). Через Angular это делается очень просто.

Кроме того, в этом примере описывается еще один важный элемент фреймворка – сервисы. Это объекты, которые могут быть использованы приложениями для взаимодействия с сервером, API или другими источниками данных. В нашем случае, мы напишем сервис, который взаимодействует с Instagram’s API и выводит массив с самыми популярными на текущий момент фотографиями.

Обратите внимание, что для работы этого кода, нам потребуется использовать на странице дополнительный файл Angular.js:

Для оптимизации работы с AJAX API здесь используется модуль ngResource (в коде модуля задействована переменная $resource).

Сервисы – это полностью автономные элементы, что делает возможным написание различных вариантов модулей для реализации процесса, при этом не затрагивая остальную часть кода.

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

Дополнительная литература

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

Сайт AngularJS
Руководство по AngularJS
Официальное пособие по AngularJS
Список сайтов, где представлено еще много информации по теме, видео и учебники

Данная публикация представляет собой перевод статьи « Learn AngularJS With These 5 Practical Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

Web and Mobile Programming

Core Java, Java EE, GWT, GXT, EXT GWT, JavaScript, CSS, HTML, jQuery, jQuery Mobile, PhoneGap, iOS, Android, GAE, Python

Поиск по этому блогу

среда, 22 апреля 2015 г.

AngularJS Filter. Фильтрация в AngularJS.

HTML Code

Таблица объектов, в которой используется фильтр.

CoffeScript Code

Изначально показываем объекты у которых поле status имеет значение либо STARTED либо NOT_STARTED

Изначально не стоит галочка показывать объекты, у которых поле status имеет значение FINISHED

Обработчки нажатия на checkbox. Если ставим галочку, то добавляем в массив допустимых статусов статус FINISHED, если убираем галочку, то массив без статуса FINISHED

Непосредственно сам фильтер. Проверяем, если поле status объекта не входит в массив допустимых значений, то не возвращаем ничего. Если же входит то, возвращаем объект.

AngularJS Filters

Filters can be added in AngularJS to format data.

AngularJS Filters

AngularJS provides filters to transform data:

  • currency Format a number to a currency format.
  • date Format a date to a specified format.
  • filter Select a subset of items from an array.
  • json Format an object to a JSON string.
  • limitTo Limits an array/string, into a specified number of elements/characters.
  • lowercase Format a string to lower case.
  • number Format a number to a string.
  • orderBy Orders an array by an expression.
  • uppercase Format a string to upper case.

Adding Filters to Expressions

Filters can be added to expressions by using the pipe character | , followed by a filter.

The uppercase filter format strings to upper case:

# 8 Фильтры в AngularJS

Всем привет. Сегодня мы с вами разберем что такое фильтры в AngularJS и зачем они нужны.

Когда вы сталкиваетесь с необходимостью вывести данные из контроллера в другом виде или формате, то вам необходимо использовать фильтры. Давайте посмотрим на примере фильтра для денег, как это работает.

Для начала создадим mainCtrl и выведем внутри него переменную money.

Теперь опишем этот контроллер и присвоим переменную money в 244.

Если мы посмотрим в браузер, то увидим строку 244. Как же применить к этой переменной фильтр? Фильтры применяются через палку и дальше пишется название фильтра, например, moneyFilter.

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

На вход эта функция принимает строку и этой строкой является та переменная, на которую мы применяем фильтр. Так же функция обязательно должна возвращать значение. Пока вернем str — то же значение, которые мы получили.

Как мы видим, в консоли браузера вывелось str 244. Теперь мы можем строку, которая у нас есть преобразовывать как угодно. Самый простой вариант — это заменить ее вообще на другое значение

Значение в браузере сразу же изменилось на 500. Фильтр в AngularJS позволяет менять значение на какое угодно.

Теперь давайте попробуем сделать что-то более полезное. Например, мы получаем от бекенда значение в формате

Как мы видим, все три переменных в разном формате и наша задача, вывести их единообразно на фронтенде в одном и том же формате.

Давайте изменим шаблон и выведем все три переменные, к которым мы будем применять moneyFilter.

Сначала давайте узнаем какой последний и первый символ у денег. Так же создадим переменную slicedPart (отрезанная часть).

Делаем проверку для первого варианта. Если последний символ — это знак $, то в slicedPart присвоим строку от первого символа до предпоследнего. Возвращаем данные в формате $ + slicedPart.

Второй вариант. Если первый символ будет долларом, то возвращаем строку не изменяя.

В третьем варианте всегда возращаем строку, дописывая перед ней знак доллара.

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

Как в AngularJS создать кастомный фильтр с зависимостями?

Несколько часов бьюсь над проблемой, причина которой, скорее всего, мое слабое знание AngularJS. Как говорится, все пальцы в кровь сгуглил, а решения не нашёл.

Топ-пост этого месяца:  Одноклассники для чайников - как пользоваться и что там делать

Надо создать кастомный фильтр, который отбраковывал бы все, что входит в заданный массив. Массив доступен в $scope, фильтр в отдельном файле addIngrFilter.js

Вот код файла с фильтром:

Однако, Angular ругается, говорит Error: [$injector:unpr] и шлёт по адресу: https://docs.angularjs.org/error/$injector/unpr?p0.

Что я делаю не так?

  • Вопрос задан более трёх лет назад
  • 524 просмотра

Решил! Итоговый код фильтра выглядит так:

А вызов фильтра так:

dishIngredientIndexes — это массив, которым надо отфильтровать исходные данные.

Паттерны в AngularJS

Краткий обзор

Один из лучших способов изучить, что то новое, это увидеть, как в нем используются уже знакомые нам вещи. Эта статья не намерена ознакомить читателей с проектированием или шаблонами проектирования. Она предлагает базовое понимание концепций ООП, шаблонов проектирования и архитектурных шаблонов. Цель статьи описать, как различные конструкции программного обеспечения и архитектурные шаблоны используются в AngularJS и написанных на нем SPA.

Введение

Краткий обзор AngularJS

AngularJS это JavaScript веб фреймворк разработанный Google. Он намерен обеспечить прочную основу для разработки CRUD SPA. SPA загружается только один раз и не требует перезагрузки страницы при работе с ним. Это означает, что все ресурсы приложения (data, templates, scripts, styles) должны быть загружены при загрузке главной страницы или по требованию. Поскольку большинство CRUD приложений имеют общие характеристики и требования, AngularJS намерен предоставить их оптимальный набор из коробки. Вот несколько важных особенностей AngularJS:

  • two-way data binding (Двустороннее связывание данных)
  • dependency injection, DI (Внедрение зависимостей)
  • separation of concerns (Разделение ответственности)
  • testability
  • abstraction

Разделение ответственности достигается путем деления каждого AngularJS приложения на отдельные компоненты, такие как:

  • partials
  • controllers
  • directives
  • services
  • filters

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

Partials

Partials это HTML строки. Они могут содержать AngularJS выражения внутри элементов или их атрибутов. Одним из преимуществ AngularJS перед другими фреймворками, является то, что шаблоны AngularJS не находятся в промежуточном формате, который должен быть преобразован в HTML (как например в mustache.js)

Вначале каждое SPA загружает файл Index.html. В случае с AngularJS этот файл содержит набор стандартных (и не очень) HTML атрибутов, элементов и комментариев, которые настраивают и запускают приложение. Каждое действие пользователя требует загрузки других partials (HTML строк или файлов с кусками HTML) или изменение состояния приложения, например через связывание данных (data binding) предоставленное фреймворком.
Пример partials:

Вместе с выражениями AngularJS, partials определяют, какие действия должны быть выполнены для взаимодействия с пользователем. В примере выше значение атрибута ng-click означает, что метод changeFoo() будет вызван из текущего scope.

Controllers

Контроллеры в AngularJS – это обычные функции, которые позволяют обрабатывать взаимодействие пользователя и приложения (например события мыши, клавиатуры и тд.) путем добавления методов в scope. Все внешние зависимости для контроллеров предоставляются при помощи механизма DI в AngularJS. Контроллеры также отвечают за взаимодействие моделей с partials путем добавления данных в scope. Это можно рассматривать как модель представления (view model).

Например, если мы подключим контроллер представленный выше в предыдущую секцию, то пользователь будет иметь возможность взаимодействовать с приложением несколькими способами:

  1. Изменение «foo» путем ввода данных в поле ввода. Это немедленно отразится на значении «foo» из-за двустороннего связывания данных.
  2. Изменение значения «foo» нажатием на кнопку с названием «Click me to change foo!»

Все пользовательские элементы, атрибуты, комментарии или классы могут быть директивами AngularJS (если они предварительно определены).

Scope

В AngularJS scope является JavaScript объектом, который доступен для partials. Scope может включать различные свойства – примитивы, объекты или методы. Все методы добавленные в scope, могут быть вызваны с помощью выражений AngularJS внутри partials, которые связанны с данным scope или прямым вызовом метода любым компонентом, у которого есть ссылка на scope. С помощью соответствующих директив, данные добавляются в scope, и могут быть связаны с представлением, таким образом, каждое изменение в свойстве scope будет отражено в представлении и каждое изменение в представлении будет отображено в scope.

Еще одной важной характеристикой scope в любом AngularJS приложении является то, что они связаны через механизм наследования прототипа (за исключением изолированных scope). Таким образом любой дочерний scope может использовать методы его родителя, так как это свойства его прямого или косвенного прототипа.

Наследование scope показано в следующем примере:

С div#child связан scope ChildCtrl, но поскольку scope ChildCtrl является вложенным в BaseCtrl, то все методы из BaseCtrl доступны в ChildCtrl, при помощи наследования прототипа и поэтому метод foo будет доступен при нажатии на кнопку button#parent-method.

Directives

Директивы в AngularJS – это место где должны выполняться все манипуляции с DOM. Как правило если у вас в контроллере происходят манипуляции с DOM, то необходимо создать новую директиву или провести рефакторинг, который устранит манипуляции с DOM в контроллере. В простейшем случае у директивы есть имя и определение функции postLink, которая включает логику директивы. В более сложных случаях директива может содержать множество свойств, таких как:

  • template
  • compile function
  • link function
  • и т. д.

Директивы можно использовать в partials, например:

Filters

Фильтры в AngularJS отвечают за инкапсуляцию логики, необходимой для форматирования данных. Обычно фильтры используются внутри partials, но так же через DI они доступны в контроллерах, директивах, сервисах или других фильтрах.
Здесь простой пример фильтра, который преобразует строку в верхний регистр:

Внутри partials фильтры могут быть использованы с помощью синтаксиса Unix конвейеров (Unix’s piping):

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

Services

Любая часть логики, которая не относится к компонентам описанным выше, должна быть помещена в сервис. Обычно сервисы инкапсулируют специфическую область логики, неизменяемую логику, XHR, WebSockets и т. д. Когда контроллеры в приложении становятся слишком «толстыми», повторяющийся код должен быть вынесен в сервисы.

Сервисы могут быть добавлены в любой компонент, который поддерживает DI (контроллеры, фильтры, директивы, другие сервисы):

Паттерны AngularJS

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

В последней главе мы рассмотрим некоторые архитектурные шаблоны, которые часто используются при разработке SPA (и не только) на AngularJS.

Services

Singleton

Singleton (одиночка) — шаблон проектирования, который ограничивает создание экземпляра класса одним объектом. Это полезно когда необходимо координировать действия во всей системе. Концепция подходит для систем, которые функционируют более эффективно, когда существует только один объект или когда экземпляры ограничены некоторым количеством объектов.

UML диаграмма иллюстрирует шаблон singleton:

Когда какому любо компоненту требуется зависимость, AngularJS разрешает ее используя следующий алгоритм:

  • Берет имя зависимости и делает поиск в хеш-карте, которая определяется в лексическом замыкании. (поэтому она имеет приватную область видимости)
  • Если зависимость найдена AngularJS передает ее как параметр компонента
  • Если зависимость не найдена:
    • AngularJS создает ее при помощи вызова фабричного метода или его провайдера (т. е. $get). Обратите внимание, что создание зависимости может потребовать рекурсивный вызов по тому же алгоритму для определения всех зависимостей данной зависимости. Этот процесс может привести к циклической зависимости.
    • AngularJS кеширует ее внутри хеш-карты упомянутой выше.
    • AngularJS передает ее в качестве параметра компонента, для которого она указана.

Лучше взгляните на исходный код AngularJS, который реализует getService:

Представьте, что каждый service это singleton, потому что service создается только один раз. Кэш можно рассматривать, как менеджера singleton. Так же эта реализация немного отличается от той, что представлена в UML диаграмме, потому что вместо создания статической приватной ссылки на singleton внутри его конструктора, мы сохраняем ссылку внутри менеджера singleton.

Таким образом, service это фактически singleton, но реализован не через шаблон singleton, тем самым обеспечивая некоторые преимущества по сравнению со стандартной реализацией:

  • улучшает тестируемость кода
  • можно управлять созданием объектов singleton (В данном случае IoC контейнер контролирует создание объектов используя ленивые вызовы.)

Для более детального рассмотрения данной темы можете ознакомиться со статьей Misko Hevery’s в блоге Google Testing.

Factory Method

Factory Method (Фабричный метод так же известен как Виртуальный конструктор (англ. Virtual Constructor)) — порождающий шаблон проектирования, предоставляющий подклассам интерфейс для создания экземпляров некоторого класса. В момент создания наследники могут определить, какой класс создавать. Иными словами, Фабрика делегирует создание объектов наследникам родительского класса. Это позволяет использовать в коде программы не специфические классы, а манипулировать абстрактными объектами на более высоком уровне.

Давайте рассмотрим следующий фрагмент:

Здесь для определения нового «provider» используется функция обратного вызова config. «Provider» это объект с методом $get. Поскольку в JavaScript нет интерфейсов и язык использует «утиную» типизацию, то договорились фабричный метод в «provider» называть $get.

Каждый service, filter, directive и controller имеют provider (т. е объект, который имеет фабричный метод $get), он отвечает за создание экземпляров компонента.

Мы можем копнуть немного глубже в реализацию AngularJS:

В примере вы можете видеть как в действительности используется метод $get:

В фрагменте выше вызывается метод invoke и ему в качестве первого аргумента передается фабричным метод ($get) сервиса. Внутри метода invoke вызывается функция annotate, которой в качестве первого аргумента так же передается фабричный метод. Функция annotate разрешает все зависимости, через механизм DI AngularJS (рассматривался выше). После разрешения всех зависимостей, вызывается фабричный метод:

Если рассуждать в терминах описанной выше UML диаграммы, то мы можем вызвать Creator, который через фабричный метод вызовет «ConcreteCreator» который создаст «Product».

В данном случае мы получаем некоторые преимущества используя шаблон фабричный метод, потому что используется косвенное создание экземпляров. Таким образом фреймворк влияет на макеты/шаблоны создания новых компонентов, потому что:

  • это наиболее подходящий момент, когда нужно создать компонент
  • разрешить все зависимости компонента
  • управлять количеством разрешенных экземпляров компонента (для service и filter один, но много для controller)

Decorator

Decorator (Декоратор) — структурный шаблон проектирования, предназначенный для динамического добавления дополнительного поведения к объекту. Шаблон Декоратор предоставляет гибкую альтернативу создания подклассов с целью расширения функциональности.

AngularJS из коробки предоставляет возможности для расширения и/или повышения функциональности уже существующих service’ ов. Используя метод decorator или $provide вы можете создать обертку для любого service, уже определенного вами или из сторонней библиотеки:

Приведенный выше пример определяет новый service с именем «foo». В функции обратного вызова «config» вызывается метод $provide.decorator и ему в качестве первого аргумента передается имя service, который мы хотим декорировать, вторым аргументом передается функция, она собственно и реализует декоратор. $delegate хранит ссылку на оригинальный service foo. Мы декорируем service переопределяя его метод bar. Фактически декорирование просто расширение bar, путем включения еще одного состояния console.log — console.log(‘Decorated’) и после чего вызываем оригинальный метод bar в соответствующем контексте.

Использование шаблона особенно полезно, когда нам нужно, изменить функциональность service созданных третьими лицами. В тех случаях, когда необходимы многочисленные декораторы (например, при измерении производительности методов, авторизации, регистрации и т.д.) может получиться много дублируемого кода и нарушение принципа DRY. В таких случаях целесообразно использовать аспектно-ориентированое программирование. АОП фреймворк для AngularJS можно найти на github.com/mgechev/angular-aop.

Facade

Шаблон Facade (фасад) — структурный шаблон проектирования, позволяющий скрыть сложность системы путем сведения всех возможных внешних вызовов к одному объекту, делегирующему их соответствующим объектам системы.
Facade может:

  1. Сделать более легким использование библиотек, понимание и тестирование, так как facade имеет более подходящие методы для выполнения общих задач
  2. Сделать библиотеку более читабельной, по той же причине
  3. Уменьшить зависимость внутренних библиотек от внешнего кода, поскольку большая часть кода использует facade, это позволяет разрабатывать систему более гибко
  4. Обернуть плохо спроектированную коллекцию API-интерфейсов, одной хорошо спроектированной (в соответствии с потребностями задачи)

В AngularJS есть несколько facade’ ов. Каждый раз когда вы хотите предоставить высокоуровневый API для некоторой функциональности, вы практически создаете фасад.

К примеру, давайте посмотрим как мы можем создать XMLHttpRequest POST запрос:

Если мы хотим отправить данные используя AngularJS $http сервис, мы можем:

Второй вариант представляет предварительно настроенную версию, которая создает HTTP POST запрос.
Третий вариант, это высокоуровневая абстракция созданная с помощью $resource service и построена поверх $http service. Мы еще раз рассмотрим этот service в разделах Active Record и Proxy.

Proxy

Proxy (Заместитель) — структурный шаблон проектирования, предоставляет объект, который контролирует доступ к другому объекту, перехватывая все вызовы (выполняет функцию контейнера). Proxy может взаимодействовать с чем угодно: сетевым соединением, большим объектом в памяти, файлом или другими ресурсами, которые дорого или невозможно копировать.

Мы можем различать три типа прокси:

  • Virtual Proxy
  • Remote Proxy
  • Protection Proxy

В этом подразделе мы рассмотрим реализованный в AngularJS Virtual Proxy.
В фрагменте ниже, мы вызываем метод get объекта $resource с именем User:

console.log выведет пустой объект. Так как AJAX запрос выполнится асинхронно после вызова User.get, и во время вызова console.log у нас не будет данных пользователя. Сразу после вызова User.get, выполняется GET запрос, он возвращает пустой объект и сохраняет ссылку на него. Мы можем представить себе этот объект как virtual proxy, он будет заполнен данными как только клиент получит ответ от сервера.

Топ-пост этого месяца:  Как в css переопределить стиль приоритетность селекторов

Как это работает в AngularJS? Давайте рассмотрим следующий фрагмент:

После выполнения фрагмента кода, показанного выше, свойство user объекта $scope будет пустым объектом (<>), это означает, что user.name будет undefined и не будет отображено. После того как сервер вернет ответ для GET запроса, AngularJS заполнит этот объект данными, полученными с сервера. В течении следующего $digest цикла, AngularJS обнаружит изменения в $scope.user и это приведет к обновлению представления.

Active Record

Active Record – это объект, который хранит данные и поведение. Обычно большинство данных в этом объекте постоянны, обязанность объекта Active Record заботиться о связи с базой данных для создания, обновления, поиска и удаления данных. Он может делегировать эту ответственность на объекты более низкого уровня, но вызов объекта Active Record или его статических методов, приведет к взаимодействию с БД.

В AngularJS определен service $resource. В текущей версии AngularJS (1,2+) он распространяется отдельным модулем и не включен в ядро.
В соответствии с документацией $resource:
$resource — это фабрика для создания объектов $resource, которые позволяют взаимодействовать с RESTful источниками данных на стороне сервера. Объект $resource имеет методы, которые предоставляют высокоуровневое поведение, без необходимости взаимодействовать с низкоуровневым service’ ом $http.

Здесь показано, как можно использовать $resource:

Вызов $resource создает конструктор для экземпляров нашей модели. Каждый из экземпляров модели будет иметь методы, которые могут быть использованы для различных операций CRUD.

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

Код выше будет сразу возвращать пустой объект и сохранять ссылку на него. После того, как будет получен и проанализирован ответ, AngularJS заполнит объект полученными данными (см. proxy).
Вы можете найти более детальную документацию по «магии» объекта $resource и AngularJS.
Так Мартин Фаулер утверждает что:
Объект Active Record должен заботиться о связи с БД, для того что бы создавать…
$resource не реализует полного шаблона Active Record, так как он взаимодействует с RESTful сервисом вместо БД. Во всяком случае мы можем рассматривать его как «Active Record для взаимодействия с RESTful».

Intercepting Filters

Создает цепочку фильтров для выполнения простых задач пред/пост обработки запросов.

В некоторых случаях вам нужно будет сделать какую либо пред/пост обработку HTTP запросов. В данном случае Intercepting Filters предназначены для пред/пост обработки HTTP запросов/ответов, для ведения журнала, безопасности или любой другой задачи, которой необходимо тело или заголовок запроса. Обычно шаблон Intercepting Filters включает цепочку фильтров, каждый из которых обрабатывает данные в определенном порядке. Выход каждого фильтра является входом для следующего.

В AngularJS мы имеем представление о Intercepting Filters в $httpProvider. $httpProvider имеет свойство interceptors (перехватчики), оно включает список объектов. У каждого объекта есть свойства: request, response, requestError, responseError.

requestError вызывается если в предыдущем перехватчике произошла ошибка или он был отклонен, соответственно responseError вызывается, когда предыдущий перехватчик ответа возбудил исключение.

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

Directives

Composite

Шаблон composite (компоновщик) – структурный шаблон проектирования. Шаблон composite описывает, как группировать объекты, что бы к ним можно было обращаться, так же как к одному объекту. Цель composite составить объекты в древовидную структуру, для представления иерархии от частного к целому.

Согласно «Банде четырех», MVC ни что иное как сочетание:

  • Strategy
  • Composite
  • Observer

Они утверждают что представление является композицией компонентов. В AngularJS аналогичная ситуация. Представления формируются композицией директив и элементов DOM, на которых эти директивы построены.

Давайте посмотрим на следующий пример:

В этом примере создается директива, которая является компонентом пользовательского интерфейса. Созданный компонент (с именем “zippy”) имеет заголовок и содержание. При нажатии на его заголовок переключается видимость его содержимого.

Из первого примера мы можем заметить, что дерево DOM это композиция элементов. Корневой компонент это html, сразу же за ним следуют вложенные элементы head, body и так далее…

Во втором примере, мы видим, что свойство директивы template содержит разметку с директивой ng-transclude. Это означает, что внутри директивы “zippy” может быть еще одна директива ng-transclude т. е. композиция директив. Теоретически мы можем делать бесконечную вложенность компонентов пока не достигнем конечного узла.

Interpreter

Interpreter (интерпретатор) – поведенческий шаблон проектирования, указывает, как определять выражения в языке. Основная идея, классифицировать каждый символ (терминальный или не терминальный) в специализированном языке программирования. Синтаксическое дерево (пример шаблона композиция) выражений используется для анализа (интерпретирования) выражения.

С помощью $parse, AngularJS предоставляет свою собственную реализацию интерпретатора DSL (Domain Specific Language). Использование DSL упрощает и изменяет JavaScript. Основная разница между AngularJS и JavaScript выражениях в том что AngularJS выражения:

  • могут включать фильтры с UNIX подобным синтаксисом
  • не возбуждают никаких исключений
  • не имеют никакого управления потоком состояния (исключения, циклы, условия так же могут использовать тернарный оператор)
  • выполняются в полученном контексте (контекст текущего $scope)

Внутри $parse определены два основных компонента:

При получении выражения, оно разбивается на лексемы и кэшируется (из-за проблем с производительностью).
Терминальные выражения в AngularJS DSL определены следующим образом:

Каждую функцию связанную с каждым терминальным символом, можно представить как реализацию интерфейса AbstractExpression (абстрактных выражений).
Клиент интерпретирует полученное выражение в определенном контексте – определенного $scope.
Несколько простых выражений AngularJS:

Template View

Преобразует данные в HTML путем встраивания маркеров в HTML страницу.

Динамическое отображение страницы не такая простая задача. Это связано с большим количеством конкатенации строк, манипуляций и проблем. Наиболее простой способ построить динамическую страницу — это написать свою разметку и включить в нее несколько выражений, которые будут обработаны в определенном контексте, в результате весь шаблон будет преобразован в конечный формат. В нашем случае этим форматом будет HTML (или даже DOM). Это именно то что делают шаблонизаторы – они получают DSL, обрабатывают его в соответствующем контексте и затем преобразуют в конечный формат.

Шаблоны очень часто используются на back-end. Например вы можете вставлять PHP код внутри HTML и создавать динамические страницы, так же вы можете использовать Smarty или eRuby в Ruby, чтобы вставлять Ruby код в статические страницы.

В JavaScript есть много шаблонизаторов, таких как mustache.js, handlebars и т.д. Большинство из них работают с шаблоном как со строкой. Шаблон может храниться различными способами:

  • статический файл, который будет получен AJAX’ом
  • скрипт встроенный внутри вашего представления
  • строка внутри вашего JavaScript кода

К примеру:

Шаблонизатор превращает строку в элементы DOM, путем объединения ее с полученным контекстом. Таким образом все встроенные в разметку выражения анализируются и заменяются их значениями.

Например, если мы обработаем шаблон показанный выше в контексте объекта: < names: ['foo', 'bar', 'baz'] >то получим:

На самом деле шаблоны в AngularJS это обычный HTML. Они не находятся в промежуточном формате, как большинство шаблонов. Что делает AngularJS компилятор, что бы обойти дерево DOM и найти уже известные директивы (элементы, атрибуты, классы или даже комментарии)? Когда AngularJS находит любую из этих директив он вызывает логику связанную с ней, она может включать определение различных выражений в контексте текущего $scope.

В контексте scope:

Будет получен тот же результат что и выше. Главное отличие в том, что шаблон расположен не внутри тега script, здесь это просто HTML.

Scope

Observer

Шаблон observer (наблюдатель) – поведенческий шаблон проектирования, в котором объект называемый субъектом, хранит список своих зависимостей, которые называются наблюдателями и уведомляет их при каких либо изменениях состояния, обычно вызовом одного из их методов. В основном используется для реализации распределенных систем обработки событий.

В приложениях AngularJS есть два основных способа взаимодействия между scope.

Первый, вызов методов родительского scope из дочернего scope. Это возможно, потому что дочерний scope наследует прототип своего родителя, как упоминалось выше (смотреть Scope). Это позволяет осуществлять одностороннее взаимодействие от ребенка к родителю. Иногда необходимо вызвать метод дочернего scope или уведомить его о возникновении события в родительском scope. AngularJS предоставляет встроенный шаблон наблюдатель, который позволяет делать это.

Второй возможный вариант использования шаблона observer, когда несколько scope подписаны на события, но scope в котором оно возникает ничего о нем не знает. Это позволяет уменьшить связанность scope’ ов, они не должны ничего знать о других scope.

Каждый scope в AngularJS имеет публичные методы $on, $emit и $broadcast. Метод $on в качестве аргументов принимает имя события и функцию обратного вызова. Эту функцию можно представить как наблюдателя – объект который реализует интерфейс observer (В JavaScript все функции первого класса, поэтому мы можем обеспечить только реализацию метода уведомления).

Таким образом текущий scope подписывается на событие «event-name». Когда оно возникнет в любом из родительских или дочерних scope, будет вызван обработчик.

Методы $emit и $broadcast используются для запуска событий, соответственно вверх и вниз по цепочке наследования. К примеру:

В примере выше scope генерирует событие «event-name» вверх для всех scope. Это значит что каждый родительский scope, который подписан на событие «event-name», будет уведомлен и его обработчик будет вызван.

Тоже самое происходит когда вызывается метод $broadcast. Разница лишь в том, что событие будет передаваться вниз – для всех дочерних scope. Каждый scope может подписаться на любое событие с несколькими функциями обратного вызова (т. е. он может связать несколько наблюдателей с данным событием).

В JavaScript сообществе этот шаблон более известен как публикация/подписка.

Chain of Responsibilities

Chain of Responsibilities (цепочка обязанностей) – поведенческий шаблон проектирования, состоит из объекта команды и последовательности обрабатывающих объектов (обработчиков). Каждый обработчик содержит логику, определяющую тип команды, которую он может обработать. Затем команда поступают к следующему обработчику в цепочке. Шаблон так же содержит механизм для добавления новых обработчиков в конец этой цепочки.

Как показано выше, scope образует иерархию, известную как цепочка scope. Некоторые из этих scope изолированы, это значит, что они не наследуют прототипы своих родительских scope, но связаны с ним через его свойство $parent.

После вызова $emit или $broadcast возникает событие, которое начинает движение (вниз или вверх в зависимости от вызванного метода) по цепочке scope, ее можно представить как шину событий или точнее как цепочку обязанностей. Каждый последующий scope может:

  • Обработать событие и передать его следующему scope в цепочке
  • Обработать событие и остановить его распространение
  • Пропустить событие к следующему scope в цепочке, без его обработки
  • Остановить распространение события без его обработки

В примере ниже, ChildCtrl генерирует событие, которое распространяется вверх по цепочке scope. Здесь каждый родительский scope (ParentCtrl и MainCtrl) должны обработать событие записав в консоль: «foo received». Если какой нибудь из scope должен быть конечным получателем, он может вызвать метод stopPropagation в объекте события.

Обработчики в показанной выше UML диаграмме, являются различными scope, добавленными в контроллер.

Command

Command — поведенческий шаблон проектирования, в котором объект используется для инкапсуляции всей необходимой информации и вызова метода через некоторое время. Эта информация включает имя метода, объект которому принадлежит метод и значения параметров метода.

В AngularJS шаблон Command позволяет описать реализацию связывания данных (data binding).
Когда мы хотим связать нашу модель с представлением мы можем использовать директиву ng-bind (для одностороннего связывания данных) и ng-model (для двустороннего связывания данных). К примеру, если мы хотим, что бы каждое изменение модели отображалось в представлении:

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

В примере выше значением тега span будет сумма значений foo и bar в верхнем регистре. Что происходит внутри?
В каждом scope есть метод $watch. Когда компилятор AngularJS находит директиву ng-bind, он создает нового наблюдателя для выражения foo + ‘ ‘ + bar | uppercase, ($scope.$watch(«foo + ‘ ‘ + bar | uppercase», function () < /* body */ >);). Функция обратного вызова будет вызвана каждый раз когда изменяется значение выражения. В данном случае функция обратного вызова будет обновлять значение тега span.

Вот несколько первых строк реализации $watch:

Мы можем представить watcher как Command. Выражение Command будет вычисляться в каждом цикле «$digest». Как только AngularJS обнаружит изменение выражения, он вызовет функцию слушателя. Watcher включает всю необходимую информацию для наблюдения и делегирования выполнение команды слушателю (фактическому получателю). Мы можем представить $scope как Client и цикл $digest как Invoker команд.

Controllers

Page Controller

Объект, который обрабатывает запросы определенной страницы или действия на сайте. Мартин Фаулер.

Согласно 4 контроллерами на страницу:
Шаблон контроллер страницы допускает ввод данных с полученной страницы, выполнение запрошенных действий для модели и определяет правильное представление для результирующей страницы. Разделение диспетчерской логики от остального кода представления.

Из-за большого количества дублируемого кода на страницах (к примеру футеры, хедеры, код заботящийся о сессии пользователя) контроллеры могут образовывать иерархию. В AngularJS есть контроллеры, которые ограничены scope. Они не принимают запросы пользователей, так как это ответственность $route или $state, а за отображение отвечают директивы ng-view/ui-view.

Топ-пост этого месяца:  Skrill — как использовать Скрилл (бывший Moneybookers) для быстрого приема и отправки платежей за

Так же как в контроллерах страницы, контроллеры AngularJS отвечают за взаимодействие с пользователем, обеспечивая обновление моделей. Эти модели после добавления в scope не защищены от просмотра, все методы включенные в представление в итоге становятся действиями пользователя (методы scope). Другое сходство между контроллерами страниц и AngularJS контроллерами – это иерархия, которую они образуют. Этому соответствует иерархия scope видимости. Таким образом простыми действиями мы можем изолировать базовые контроллеры.

Контроллеры AngularJS очень похожи на ASP.NET WebForms, так как их обязанности практически одинаковы. Вот пример иерархии между несколькими контроллерами:

Этот пример иллюстрирует самый простой способ повторного использования логики с помощью базового контроллера, но в любом случае в «production» приложениях не рекомендуется помещать логику авторизации в контроллеры. Доступ к различным маршрутам можно определить на более высоком уровне абстракции.
ChildCtr отвечает за отображение модели в представлении и обработку действий, таких как нажатие на кнопку с названием «Click».

Others

Module Pattern

На самом деле это не шаблон проектирования от «банды четырех» и даже ни один из «Patterns of Enterprise Application Architecture». Это традиционный JavaScript шаблон проектирования, целью которого является обеспечение инкапсуляции.
Используя шаблон модуль вы можете получить приватность данных на основе функционально-лексической области видимости. Каждый модуль может иметь ноль и более приватных методов, которые скрыты в локальной области видимости.

Эта функция возвращает объект, который предоставляет публичный API для данного модуля:

В примере выше IIFE (Immediately-Invoked Function Expression — выражение немедленно вызванной функции), которая после вызова возвращает объект, с двумя методами (setTitle и getTitle). Возвращенный объект присвоен переменной Page. В таком случае пользователь объекта Page не имеет прямого доступа к переменной title, которая определена внутри локальной области видимости IIFE.

Шаблон модуль очень полезен при определении service в AngularJS. Используя этот шаблон мы можем достичь (и на самом деле достигаем) приватности:

После того как мы добавим foo в любой другой компонент, у нас не будет возможности использовать приватные методы, только публичные. Это решение является довольно мощным, особенно, когда мы создаем библиотеки для повторного использования.

Data Mapper

Шаблон Data Mapper – это слой доступа к данным, который выполняет двунаправленную передачу данных между постоянным хранилищем данных (часто это реляционная БД) и данными в памяти. Цель этого шаблона – хранить в памяти представление постоянных данных, независимо друг от друга и от себя самого.

Как уже говорилось Data Mapper используется для двунаправленной передачи данных между постоянным хранилищем данных и данными в памяти. Обычно AngularJS приложение взаимодействует с API сервера, которое написано на любом серверном языке (Ruby, PHP, Java, JavaScript и т.д.).

Если у нас есть RESTful API, service $resource поможет нам взаимодействовать с сервером в Active Record подобном стиле. Хотя некоторые приложения возвращают данные с сервера не в самом подходящем формате, который мы хотим использовать на front-end.

К примеру, давайте предположим у нас есть приложение в котором у каждого пользователя:

  • name
  • address
  • list of friends

И наше API у которого есть следующие методы:

  • GET /user/:id – возвращает имя и адрес полученного пользователя
  • GET /friends/:id – возвращает список друзей данного пользователя

Одно из решений, использовать два различных service, один для первого метода и другой для второго. Возможно более подходящим решением будет, использование одного service, который называется User, он загружает друзей пользователя, когда мы запрашиваем User:

Таким образом мы создали псевдо Data Mapper, который адаптируется к нашему API в соответствии с требованиями SPA.
Мы можем использовать User следующим образом:

Как использовать параметры в фильтре в AngularJS?

Я хочу использовать параметр в фильтре, когда я повторяю некоторые массивы с ng-repeat

но я хочу иметь возможность использовать фильтр, как

но это не работает. Как я могу сделать что-то подобное?

5 ответов:

обновление: Я думаю, что я действительно не смотрел на документацию достаточно хорошо, но вы можете определенно использовать фильтр фильтр с этим синтаксисом (см. эта скрипка) для фильтрации по свойству на объектах:

вот мой оригинальный ответ на случай, если это кому-то поможет:

С помощью фильтр фильтр вы не сможете передать в параметр, но есть по крайней мере две вещи, которые вы можете делать.

1) Установите данные, которые вы хотите отфильтровать в переменной области и ссылайтесь на нее в своей функции фильтра, например эта скрипка.

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

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

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

На самом деле есть еще одно (возможно, лучшее решение), где вы можете использовать собственный фильтр «фильтр» angular и по-прежнему передавать аргументы в свой пользовательский фильтр.

рассмотрим следующий код:

чтобы сделать эту работу вы просто определите ваш фильтр следующее:

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

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

Это может быть немного неуместно, но если вы пытаетесь применить несколько фильтров с пользовательскими функциями, вы должны посмотреть: https://github.com/tak215/angular-filter-manager

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

Я хочу фильтровать студентов по полу, чтобы быть мальчиком и фильтровать по имени их.

сначала я создаю функцию с именем «filterbyboy» следующим образом:

Explaination: если не имя фильтра, то отобразить все студенты еще фильтр по имени ввода и пол как «мальчик»

Если вы создали пользовательский фильтр AngularJs, вы можете отправить несколько параметров в свой фильтр.Вот использование в шаблоне

а если вы используете фильтр внутри вашего контроллера вот как вы можете сделать это

Если вам нужно больше примеров и онлайн-демо, вы можете использовать это

AngularJS — Фильтры

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

Внимание.

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

Opera

Google Chrome

Mozilla Firefox

Yandex

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

uppercase

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

lowercase

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

currency

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

filter

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

orderBy

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

Пример

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

AngularJS. Пользовательские фильтры в AngularJS

Переключим проект на состояние соответствующее данному шагу:

По сравнению с предыдущим шагом были внесены следующие изменения.

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

Имя фильтра это «checkmark». Аргумент input соответствует значению true или false , и мы возвращаем один из двух юникод символов ( \u 2713 -> ✓) или ( \u 2718 -> ✘) .

Далее надо зарегистрировать модуль phonecatFilters как зависимость у главного модуля phonecatApp .

Шаблон

Т.к. код фильтра живет в файле app / js / filters . js мы должны подключить его в наш layout template.

Мы должны вызвать beforeEach ( module ( ‘phonecatFilters’ )) перед тем как запускать любой тест проверяющий фильтры. Таким образом мы загружаем модуль phonecatFilters в инжектор для запуска этого теста.

Также мы вызвали вспомогательную функцию inject ( function ( checkmarkFilter ) < . >) чтобы получить доступ к фильтру, который хотим протестировать. Смотрите angular.mock.inject().

Суффикс ‘Filter’ добавляется к имени фильтра при внедрении.

Karma должна выдать такой результат тестирования:

AngularJS Filters: Collection Filters

Learn how to use AngularJS Filters for filtering a Collection of Values.

AngularJS Filters: Collection Filters

The AngularJS Filters can be used to filter a Collection of Values just as we used them to Filter Single Data Values. But Filtering Collection values requires a lot of care and attention to detail.

AngularJS provides three built-in filters which are used to filter Collection Values. 1. limitTo , 2. filter and 3. orderBy

AngularJS Collection Filters: Limit the Number of Items

The AngularJS Filter of limitTo is used to assign a restriction on the number of items to displayed from the source data. This filter is useful if there is space constraint or to display only limited number of items.

In the demo, we have used the filter limitTo along with property studentLimit, defined within the controller function. The filter is applied on the directive ng-repeat so that it repeats only for the given number of times as specified by the filter.

Example: AngularJS Collection Filters limitTo Filter

AngularJS Collection Filter : Select Elements using filter

AngularJS provides a filter to Select elements from a collection using the filter filter, the name is a bit confusing.

The criteria for selection can be specified using an expression in form of a map object inorder to match element values, you can also use a function

In the demo, we have used a map object to select students belonging the department Arts, the scope behaviour selectArts is called for every items within the collection.

Example: Angular Collection Filters Select Elements using a Filter

Give it a TRY! » Note:The elements for which the filter return true are displayed

AngularJS Collection Filters : Sorting Elements

AngularJS provides a built-in filter called orderBy, is used to sort the elements within the array based on the name of the property specified.

In the demo, we have used the property fees to sort the element within the array.

Example: Angular JS Collection Filters Sorting Elements

Give it a TRY! » Note:The items are sorted in the ascending order of fees, the value must be within quotes

AngularJS Collection Filters : Setting the Direction of Sort

The AngularJS sort Filter sortBy by default sorts the specified property in the ascending order(i.e low to high), but the user has an option to set the order using the symbol +(for ascending order) and (- for descending Order)

Example: AngularJS Collection Filters Setting the Direction of Sort

Give it a TRY! » Note:Using the symbol ( + ) has no effect, since that is the default direction or sort.

AngularJS Collection Filters : Sorting using a Function

The AngularJS filters of orderBy can also sort element using a function, enabling you to sort elements in various forms and not simply using single property values.

An object from the source data is passed to the function used for sorting, it returns an object which then can be used to compare elements while sorting.

In the demo, the function sorts the elements in ascending order based on property fees, but elements with value of examDate less than 4 are left untouched.

Example: AngularJS Collection Filters Sorting using a Function

Give it a TRY! » Note: While invoking the function from the ng-repeat, the name of function should not be within quotes.

AngularJS Collection Filters : Sorting with multiple types of Declaration

The AngularJS Filter sort filter orderBy can be declared in multiple way, so that if two elements have same value for a property, they can be compared based on some other property.

In the demo, we have first sorted the element using a function from last example and then used to the property fees to arrange them in descending order.

Example: AngularJS Collection Filter Sort using Multiple types of Declarations

Give it a TRY! » Note: There are two declaration, the first is the function while second orders the result in descending order.

AngularJS Collection Filters : Chaining Multiple Filters

The AngularJS filters can be combined with other filters to create a complex filter, producing completely different effect than the individual filters.

To chain multiple filters together, use the bar ( | ) symbol. The filters are evaluated in the direction left to right.

Example: AngularJS Collection Filter Chaining Multiple Filters

Give it a TRY! » Note:The first filter is orderBy to sort, and the result is restricted using limitTo filter.

Добавить комментарий