AngularJS $scope.$watch on multiple filters

Question

I have been tinkering with no luck, at first I thought I had it but now I can't get the results of multiple filters to remain consistent.

My issue is that when I select a filter on the front-end, the first one I use works, but when I then choose a second filter on top of that, the filtered.length and number of pages resets, but the data displayed is correct. Below is what's in my controller

    $scope.list= response.data;
        var memberList = $scope.list;

        $scope.currentPage = 1; //current page
        $scope.maxSize = 5; //pagination max size
        $scope.entryLimit = 25; //max rows for data table

        $scope.listLength = memberList.length;
        $scope.noOfPages = 22;


        $scope.$watch('filterA', 
            function(term) {
                $scope.filtered = filterFilter($scope.list, term);
                $scope.noOfPages = Math.ceil($scope.filtered.length/25);
                $scope.listLength = $scope.filtered.length;
        }, true);
        $scope.$watch('filterB', 
            function(term) {
                $scope.filtered = filterFilter($scope.list, term);
                $scope.noOfPages = Math.ceil($scope.filtered.length/25);
                $scope.listLength = $scope.filtered.length;
        }, true);
        $scope.$watch('filterC', 
            function(term) {
                $scope.filtered = filterFilter($scope.list, term);
                $scope.noOfPages = Math.ceil($scope.filtered.length/25);
                $scope.listLength = $scope.filtered.length;
        }, true);   
        $scope.$watch('filterD', 
            function(term) {
                $scope.filtered = filterFilter($scope.list, term);
                $scope.noOfPages = Math.ceil($scope.filtered.length/25);
                $scope.listLength = $scope.filtered.length;
        }, true);

And then in the view, I've got 4 inputs...one is search, the others dropdown. When I use any more than one of the filters, the length does not update.

<input type="text" ng-model="filterA">
<input type="text" ng-model="filterB">
<input type="text" ng-model="filterC">
<input type="text" ng-model="filterD">

{{filtered.length}}
<uib-pagination total-items="filtered.length" items-per-page="25" next-text="Next" previous-text="Previous" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" num-pages="noOfPages"></uib-pagination>
 <table>
   <tbody>
      <tr ng-repeat="post in filtered | filterA | filterB | filterC | filterD | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
         <td>{{post.name}}</td>
       </tr>
    </tbody>
   </table>

show some more code and let us know how you are using it in front end so post that code also — Saurabh Agrawal
– Saurabh Agrawal, Commented Feb 20, 2017 at 2:18

JLRishe · Accepted Answer · 2017-03-25 03:43:05Z

1

Hopefully, it's quite clear what's happening here. Every time one of your $watch expression fires, you are applying the most recently changed filter to the original list, so that's the only one that has any effect.

Probably your best bet is to apply all four filters every time one changes. Here's one way you can do that:

function applyFilters() {
    var filters = ['filterA', 'filterB', 'filterC', 'filterD'];

    $scope.filtered = filters.reduce(function (l, name) {
        return filterFilter(l, $scope[name]);
    }, $scope.list);
    $scope.noOfPages = Math.ceil($scope.filtered.length/25);
    $scope.listLength = $scope.filtered.length;
}

$scope.$watch('filterA', applyFilters, true);
$scope.$watch('filterB', applyFilters, true);
$scope.$watch('filterC', applyFilters, true);   
$scope.$watch('filterD', applyFilters, true);

I'm pretty sure you should also remove the | filterA | filterB | filterC | filterD from your view. If you're already filtering in your watch expression, then those can't be doing anything useful.

answered Mar 25, 2017 at 3:43

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheIntrepidSpiff Over a year ago

Thank you, it's working better now. The results that show up match the applied filters, but what's strange is that the 'filtered.length' is incorrect? When i check the 'filtered' object, it's got too many values...but then the ng-repeat shows the proper results. This is mind boggling to me!

JLRishe Over a year ago

@TheIntrepidSpiff I'm having trouble imagining how that would be possible. Are you saying that the filtered object has values that don't match the filter? How are you observing its length? Is it changing at all, or staying at a fixed value?

TheIntrepidSpiff Over a year ago

@JLRrishe: thanks for your help! I finally got it working. The way I was filtering wasn't filtered specifically on the key, and it turns out the unique things i was filtering, weren't so unique and had cross conflicts with other fields. This was throwing off the counts when i used multiple filters. After updating to your suggestion, I needed to change my inputs to filter on the field by adding the key 'field1': <input type="text" ng-model="filterA.field1"> and then in my ng-repeat to change it to: '...| filter:filterA |...' for each of the filters

Collectives™ on Stack Overflow

AngularJS $scope.$watch on multiple filters

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related