My goal is to achieve a specific behavior by using custom filters. I am working on creating a unified search bar that will display entire group names with all failing students, as well as group names with only the matching students.
If you want to see the code, check out my Plunker here
For example, when searching for "er," the results should include "FiddlER Crabs" and "FiERy Skippers" in full, but "Golden Bears" should only show Drew ParkER and ERic.
The current Plunker demonstrates the default filter behavior. By changing the filter in the HTML to my custom filter, called nestFilter on line 27, and observing the console logs, you can see that the array updates with the addition and removal of search terms, but the elements are not being redrawn. Here's my custom filter:
bootTracker.filter('nestFilter', function() {
return function(elements, input) {
var filteredCohorts, filteredCohortsStudents;
filteredCohorts = [];
filteredCohortsStudents = [];
console.log(elements);
angular.forEach(elements, function(cohort) {
var matchedStudents;
matchedStudents = [];
if (cohort.name.match(new RegExp(input, 'ig'))) {
filteredCohorts.push(cohort);
}
angular.forEach(cohort.students, function(student) {
if (student.name.match(new RegExp(input, 'ig'))) {
return matchedStudents.push(student);
}
});
cohort.students = matchedStudents;
if (cohort.students.length > 0) {
return filteredCohortsStudents.push(cohort);
}
});
console.log(filteredCohorts);
return filteredCohorts;
};
});