Filtering items displayed as an accordion list

1

Hi guys,

I have an accordion list which follows this sort of structure:
Primary 1

  • Secondary 1
  • Secondary 2

Primary 2

  • Secondary 3
  • Secondary 4

I have a search bar filtering for items in this accordion list, and I only want to filter on the secondary items. This filter will only search items that are in accordion lists that are expanded - that is, they are visible, which defeats the point of having an accordion list.

Codepen: http://codepen.io/anon/pen/WbjwXj

If you remove the ng-show attribute on line 38, all of the lists will expand and filtering will be shown live.

Does anyone have any ideas on ways around this? All of the data is constant and is preloaded if that helps. Ideally I’d like to hide any of the primary items which don’t have any children items matching the filter too.

Cheers!

2

A coworker and I solved this issue this morning. Updating for posterity, in case anyone else runs into a similar problem.

We modified the ng-repeat directive to the following:

ng-repeat="group in filteredGroups = (groups | filter:search.value)"

And we then modified the secondary accordion ng-show to the following:

ng-show="(filteredGroups.length > 0 && search.value) || isGroupShown(group)"

And then we realised that it was actually only filtering on the primary fields instead of the secondary fields, so wrote a custom filter:

.filter('groups', function() {
        return function( groups, searchCriteria) {
    
    if (searchCriteria == null || searchCriteria.length == 0)
      return groups;
    
    var filtered = [];
    
    angular.forEach(groups, function(group) {
                    var foundInGroup = false;
                    
                    for (var i=0; i < group.items.length; i++) {
                    var groupName = group.items[i].toLowerCase();
                    if (foundInGroup == false
                        && groupName.indexOf(searchCriteria.toLowerCase()) > -1) {
                    filtered.push(group);
                    foundInGroup = true;
                    }
                    }
                    });
    
    return filtered;
    };
  })

And everything was dandy!

3 Likes
3

Hello Princess Peach and excellent your contribution, I started a few days ago with Ionic, and I want to ask you … the custom filter, which file I include? Thank you very much!