javascript — AngularJS Фильтр записей для соответствующего значения в поле (массив) в записи
Так что я новичок в AngularJS, и я пытался получить какой-то ответ на этот вопрос, но не повезло, поэтому этот пост.
У меня есть массив объектов (JSON), и в одном объекте есть поле под названием категории, это поле фактически является самим массивом и может содержать несколько значений.
Фильтр, который я ищу, есть, есть «select», и пользователь выберет значение «select», и все записи, имеющие это значение в массиве их категорий, должны появиться для пользователя, а остальные могут быть скрыты. У этого «выбора» есть множественный выбор, но я собираюсь оставить его для одного выбора. Но так как я хочу предоставить лучший продукт, я был бы очень признателен, если бы вы помогли мне как с множественным, так и с одним выбором.
Вот пример данных:
var jobs = [{«ID»: «10», «Title»: «SQA Engineer», «Employer»: «XXXX», «Address»: «XXX Floor», «Email»: «XXXX», «ContactNumber» : «», «Описание»: «1 год опыта.», «Квалификация»: «XXXX», «LastApplyDate»: «2016-08-26», «Тип»: «1», «CreatedDT»: «2016- 08-06 13:06:36 «,» CreatedBy «: null,» Categories «: [» 25 «,» 28 «]}, {» ID «:» 8 «,» Title «:» Maid «,» Работодатель «:» XXX » «Адрес»: «XXX», «Электронная почта»: «XXXX», «ContactNumber»: «XXXX», «Описание»: «», «Оценка»: «NONE», «LastApplyDate»:» 2016-08-26 «,» Type «:» 1 «,» CreatedDT «:» 2016-08-06 12:27:17 «,» CreatedBy «: null,» Categories «: [» 28 «]}];
Решение
Итак, здесь есть два разных подхода. Один очень простой, просто с использованием основных, встроенный angularjs filter апи, а другое делается путем создания нашего собственного пользовательского фильтра.
Первый (легкий) подход
Селектор одного значения для категорий заданий, возвращает все задания, содержащие совпадения для выбранной категории.
Изменить — Обновленный код & демо на основе комментариев! Рабочая ДЕМО
<label>Category:
<select ng-model="category" ng-options="category.id as category.name for category in categories"></select>
</label>
<div class="results">
<div class="job-listing"ng-bind="job | json"ng-repeat="job in jobs | filter:{Categories: category}:true">
</div>
</div>
Второй (более продвинутый) подход
Селектор с несколькими значениями для категорий заданий, возвращает все задания, содержащие совпадение для ВСЕ выбранные категории. (то есть задание с категориями [«25»] вернет false, если выбраны «25» и «26»)
Здесь мы должны создать собственный фильтр, потому что, хотя встроенный фильтр angular делает много полезного, он имеет свои ограничения.
Наш пользовательский фильтр (соответствует ВСЕМ условиям поиска)
app.filter("getMatches", function () {
return function (items, options) {
var options = options || {};
var searchField = options.searchField || "";
var searchTerms = options.searchTerms || [];
if (searchField === "" || !searchTerms.length || (searchTerms.length === 1 && searchTerms[0] === '')) {
return items;
}
return items.filter(function (item) {
return !searchTerms.some(function(term) {
return item[searchField].indexOf(term) === -1;
});
});
}
});
Модифицированный фильтр (соответствует ЛЮБОМУ поисковому запросу)
app.filter("getMatches", function () {
return function (items, options) {
var options = options || {};
var searchField = options.searchField || "";
var searchTerms = options.searchTerms || [];
if (searchField === "" || !searchTerms.length || (searchTerms.length === 1 && searchTerms[0] === '')) {
return items;
}
return items.filter(function (item) {
return searchTerms.some(function(term) { // notice the subtle difference here
return item[searchField].indexOf(term) > -1; // and here
});
});
}
});
Поддержка HTML
<select multiple ng-model="selectedCategories" ng-options="category for category in categories"></select>
<div class="job-listing" ng-bind="job | json"ng-repeat="job in jobs | getMatches:{searchField: 'Categories', searchTerms: selectedCategories}">
</div>
Другие решения
Других решений пока нет …