0

I have an ngRepeat directive that does a count based on the output of filters. This is functioning as expected except when I change the value of the dynamic filter. When I change the filter value, the ngRepeat filters properly but the counts don't always update with it. They do sometimes but not every time. How do I ensure that the value updates every time?

ngRepeat

<li class="list-group-item" data-ng-repeat="e1 in events | availFilter:filterBy | unique:team" ng-init="teamCount = (events | availFilter:filterBy | filter:{team:e1.team})">
<div class="list-group-item-header" data-ng-click="headerClick($event)" >
    <span class="title">{{ e1.team }}</span>
    <span class="badge">{{ teamCount.length }}</span>'
</div>

Controls that Change Filter

<li role="presentation" data-ng-class="{ active: activeTab('today') }">
  <a data-ng-click="filterBy = 'today';">Today</a>
</li>
<li role="presentation" data-ng-class="{ active: activeTab('before8') }"><a data-ng-click="filterBy = 'before8';">Before 8am</a></li>
<li role="presentation" data-ng-class="{ active: activeTab('after5') }"><a data-ng-click="filterBy = 'after5';">After 5pm</a></li>

Filter

availApp.filter('availFilter', function () {  
  return function (collection, term) {
      var outCollection = [];

            switch(term){
                case 'today':
                    outCollection = collection;
                    break;
                case 'before8':
                    angular.forEach(collection, function(item){
                        if(item.start.getHours() < 8)
                            outCollection.push(item);
                    });
                    break;
                case 'after5':
                    angular.forEach(collection, function(item){
                        var hr = item.end.getHours();
                        var min = item.end.getMinutes();
                        if(hr > 17 || (hr == 17 && min > 0))
                            outCollection.push(item);
                    });
                    break;
                default:
                    break;
            }

            return outCollection;
  };
});

1 Answer 1

0

Angular doesn't know when your filter logic changes, that is the fundamental problem here.

The times when it IS updating will be due to some other digest action which is recomputing the filters. The best solution I have for you will be to not be performing this sort of logic in a filter, but instead expose it as a scoped variable which angular IS aware of. E.g. you have a list and you create a subset of this list as a scoped variable, and update that as things change.

2
  • The filterBy variable is apart of scope, so I was operating under the assumption that changing it would alert angular of a change... I'm thinking it's bc I declare a new variable for each row with a 1ngInit` which is not apart of scope Dec 3, 2014 at 22:54
  • I ended up creating a subset of data from the list then attaching it to the scope like you suggested. Thanks. Dec 3, 2014 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.