Как в ангуляр по клику сделать фильтр объектов?

Question

[Михаил Синяков]

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

2010 2011 2012 2013 2014 За все время

и

Все проекты Веб-сайт Мобильные приложения Игры

изначально активны За все время и Все проекты
как сделать чтобы при нажатии на год фильровались только obj.year === 2010
а потом при клике на Игры в этом году фильровались только те что с играми

if(obj.tags.indexOf('games')>=0)
и наоборот.

Answer 1

[n0thing]

Что кнопки формировались автоматически из существующих годов, можно использовать фильтр groupBy:

<div class="button" ng-repeat="(key, value) in data | groupBy: year" ng-click="currentYear=key">{{key}}</div>

Так же само и кнопки для типа( игры и т.д.):

<div class="button" ng-repeat="(key, value) in data | groupBy: type" ng-click="currentType=key">{{key}}</div>

Затем при выводе Вашей информации используйте фильтры currentYear и currentType

<div ng-repeat="element in data | filter:{year:currentYear,type:currentType}">...</div>

Comments

[Михаил Синяков]

спасибо, правда не совсем понятно, можешь глянуть codepen.io/pvpshoot/pen/jEWqGq
и привести пример рабочий для моего варианта, я уж тогда разберусь

[n0thing]

pvpshoot: codepen.io/anon/pen/ogbxMQ
Весьма странно у Вас построенно приложение, я бы на переделал все совсем иначе.
По умолчанию отображаются все проекты за все года (если нужно изменить, установите нужное значение в ng-init).
Касательно автоматического формирования кнопок по годам и типам, подключите https://github.com/a8m/angular-filter.
Используйте фильтр groupBy:year и ng-repeat выдаст все уникальные года, из этого репита и делайте кнопки по годам, аналогично для типа продукта.

[Михаил Синяков]

n0thing: большое спасибо, теперь стало понятно. единственное я в клике по ссылке поменял на ng-class="{active: year==2013}" ибо то что Вы предложили не сработало

Answer 2

[Владислав]

Обязательно ангуляр?
isotope.metafizzy.co

Comments

[Михаил Синяков]

ну так как его учу, то хотелось бы через него, а за ссылочку спасибо =)