AngularJS: пользовательские фильтры и ng-repeat
Я новичок в AngularJS, и я создаю небольшое приложение для аренды автомобилей напрокат, которое тянет в какой-то JSON и отображает различные биты этих данных через ng-repeat, с несколькими фильтрами
<article data-ng-repeat="result in results | filter:search" class="result">
<header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, £{{result.price.value}} - {{ result.company.name }}</h3></header>
<ul class="result-features">
<li>{{result.carDetails.hireDuration}} day hire</li>
<li data-ng-show="result.carDetails.airCon">Air conditioning</li>
<li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
<li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
</ul>
</article>
<h2>Filters</h2>
<h4>Doors:</h4>
<select data-ng-model="search.carDetails">
<option value="">All</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="9">9</option>
</select>
<h4>Provider:</h4>
Atlas Choice <input type="checkbox" data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br>
Holiday Autos <input type="checkbox" data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br>
Avis <input type="checkbox" data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>
Теперь я хочу создать настраиваемый фильтр в моем контроллере, который может перебирать элементы в моем ng-repeat и возвращать только те элементы, которые соответствуют определенным критериям - например, я могу создать массив значений, на основе которого "флажок" поставщик" проверяется, а затем оценивает каждый элемент ng-repeat. Я просто не могу понять, как это сделать, хотя с точки зрения синтаксиса - может ли кто-нибудь помочь?
Вот мой плункер:
http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview
Ответы
Ответ 1
Если вы хотите запустить некоторую настраиваемую логику фильтра, вы можете создать функцию, которая принимает элемент массива в качестве аргумента и возвращает true
или false
в зависимости от того, должна ли она быть в результатах поиска. Затем передайте его команде filter
так же, как вы делаете с объектом search
, например:
JS:
$scope.filterFn = function(car)
{
// Do some tests
if(car.carDetails.doors > 2)
{
return true; // this will be listed in the results
}
return false; // otherwise it won't be within the results
};
HTML:
...
<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result">
...
Как вы можете видеть, вы можете связать множество фильтров вместе, поэтому добавление пользовательской функции фильтрации не заставляет вас удалять предыдущий фильтр с помощью объекта search
(они будут работать вместе без проблем).
Ответ 2
Если вам по-прежнему нужен настраиваемый фильтр, вы можете перейти в модель поиска к фильтру:
<article data-ng-repeat="result in results | cartypefilter:search" class="result">
Если определение для файлового фильтра может выглядеть так:
app.filter('cartypefilter', function() {
return function(items, search) {
if (!search) {
return items;
}
var carType = search.carType;
if (!carType || '' === carType) {
return items;
}
return items.filter(function(element, index, array) {
return element.carType.name === search.carType;
});
};
});
http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview
Ответ 3
Вы можете вызвать больше 1 функциональных фильтра в одном и том же фильтре ng-repeat
<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">
Ответ 4
Один из самых простых способов исправить это - использовать $
, который является поиском всех.
Вот плункер, который показывает, что он работает. Я изменил флажки на радио (потому что я думал, что они должны дополнять друг друга).
http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview
Если вам нужен очень конкретный способ сделать это (вместо выполнения общего поиска), вам нужно работать с функциями в поиске.
Документация здесь
http://docs.angularjs.org/api/ng.filter:filter