Вопрос: AngularJS нетривиальный фильтр
Всем доброго дня.
Сижу ломаю голову вот над такой задачкой, переложенной на тестовый пример из AngularJS ng-repeat
Есть список друзей, и к нему прикручен какой-то фильтр (в данном случае по всему тексту, из input), но хочется так же фильтровать еще по каким-либо параметрам, например при установке галочки "Только девушки", производить фильтр по gender:'girl', а если галочка не стоит, использовать весь массив
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
]">
I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="Фильтр друзей..." aria-label="Фильтр друзей" />
<input type="checkbox" ng-model="a" aria-label="Только девушки">Только девушки...
<ul>
<li ng-repeat="friend in results = friends | filter:q">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
<li ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
</div>
Так вот, как можно добавить фильтр чтобы он срабатывал только когда чекбокс включен? Кроме варианта с ng-if, так как хотелось бы получить более изящное решение.
Использовать сложный фильтр как функцию и передавать значение ng-model="a" параметром, например так <li ng-repeat="friend in results = friends | filter:q | filter:myFunction(a)"> , но тогда как в этой функции получить объект friend который должен проверяться на условие фильтра.
Второй вариант очень заманчив, так как можно передавать сразу много параметров и делать очень сложную логику фильтра, но вот все никак не могу придумать как получить текущий friend
Ответ:
не все так просто в нашем королевстве :(
Мой вариант тоже не есть хорошее решение.
Основных минусов два.
Первое, что в данном примере фактически фильт можно применять только в одном месте:
так работает:
<ul>
<li ng-repeat="friend in results = friends | filter:q| myFilter: Run (myRuningFunction):true">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
<li ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
так не работает второй фильтр:
<ul>
<li ng-repeat="friend in results = friends | filter:q| myFilter: Run (myRuningFunction):true">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
<li ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
<ul>
<li ng-repeat="friend in results = friends | filter:q| myFilter: Run (myRuningFunction2):false">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
<li ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
так как при вызове фильтра второй раз аргументы будут переданы какие есть в первом :(
Второй минус, это то что данное решение выполняется каждый раз как только что-то меняется в модуле, даже независимое от данного фильтра, так что чтобы не грузить проц надо прописывать проверку, что аргументы в фильтре не изменились.
Так что надо еще допились напильником или выкинуть это решение и искать другое
Удобный поиск информации с популярных форумов в одном месте