Currently, I am facing an issue while trying to set up a search feature with a custom filter. It appears that the second parameter being sent to the filter is coming through as undefined. The objects being searched in this scenario are books, each with a genre array attribute.
To aid in the searching process, I have an array of genre objects that are populated via the controller in a multiple select element.
The problem lies in the fact that the second parameter being passed to the custom filter is showing up as undefined. Below is the code snippet for the filter located within the controller. Upon debugging, I've confirmed that the filter logic itself is correct, except for the fact that it's indicating 'filterBy' as undefined:
CONTROLLER -
app.filter('genres', function () {
return function (books, filterBy) {
console.log(filterBy);
return books.filter(function (element, index, array) {
return element.genre === filterBy.genre;
});
};
});
HTML-
<div ng-controller="LibraryController as libraryCtrl">
<form>
Book name
<input type="text" name="Book name" ng-model="filterBy.name" class="inputTxtForm">
<br/> Author
<input type="text" name="author" ng-model="filterBy.rating" class="inputTxtForm">
<br/> Genres
<select multiple="true" ng-model="filterBy.genre" ng-options="genre for genre in libraryCtrl.genres" class="inputTxtForm">
</select>
</form>
<section class="tableSection">
<table>
<tr ng-repeat="book in libraryCtrl.books | filter:filterBy | genres:filterBy">
<td>
{{book.name}}
</td>
<td>
{{book.author}}
</td>
<td>
{{book.genre.join()}}
</td>
</tr>
</table>
</section>
</div>
Any ideas on what could be going wrong here?