How to implement filtering with Angular Ui-router

Question

We want to implement pagination (or filtering) using ui-router. We don't want to reload controller each time next/prev parameters changed. We want to listen for an event and load data from API with new state parameters.

Code from our routes.js

  $stateProvider.state('app.company.account.charges.index', {
    url: '?before&after',
    controller: 'ChargesCtrl',
    templateUrl: 'app/charges.html',
    reloadOnSearch: false,
    params: {
      before: { value: null, squash: true },
      after:  { value: null, squash: true },
    }
  });

our controller:

function ChargesCtrl() {
  var loadCharges = function() {
    Charge.query({before: $state.params.before, after: $state.params.after}).then(function(charges) {
        $scope.charges = charges;
    });
  }

  $scope.goNext = function() {
    $state.go('app.company.account.charges.index', {before: $scope.pagination.before, after: null});
  };

  $scope.goPrevious = function() {
    $state.go('app.company.account.charges.index', {after: $scope.pagination.after, before: null});
  };

  $scope.$on('state params were changed', function() {
    loadCharges();
  });
}

how can we track state params changes if $stateChangeSuccess is not raised because of reloadOnSearch is false.

P.S. now we just broadcast own event to solve this, but I'm looking for 'natural' solution :)

Hey Man this might help you : stackoverflow.com/questions/20884551/… — krish
– krish, Commented Nov 25, 2015 at 11:27
Yeah. This is the answer. Thanks! Still I don't like the hack offered here: stackoverflow.com/a/29262392/2530416 :) Probably we will just raise our own event to reload data in controller. — Gabriel Pavel
– Gabriel Pavel, Commented Nov 25, 2015 at 12:12

Tiziano Coroneo · Accepted Answer · 2015-11-25 11:09:30Z

1

Ui Bootstrap has a really easy way to implement pagination. And it's also easy to integrate with Ui-router! This link will bring you to the pagination help :) have fun coding

answered Nov 25, 2015 at 11:09

Tiziano Coroneo

6596 silver badges18 bronze badges

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

1 Comment

Gabriel Pavel Over a year ago

Tiziano, thanks for your answer. But it's not directly about pagination. As I said we can raise event and do what we need. We don't need to add additional code.

Community · Accepted Answer · 2017-05-23 12:15:10Z

0

Thanks to @krish I have found the answer: Set URL query parameters without state change using Angular ui-router

And it's to use a hack with changing reloadOnSearch option to false before updating location params and then revert it back in $timeout.

However I think that using something like this is more explicit:

$scope.goNext = function() {
    $state.go('app.company.account.charges.index', {before: $scope.pagination.before, after: null});
    $scope.$emit('charges.paginated');

};

$scope.$on('charges.paginated', function(event) {
    event.stopPropagation();

    loadCharges();
});

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 25, 2015 at 12:20

Gabriel Pavel

413 bronze badges

Collectives™ on Stack Overflow

How to implement filtering with Angular Ui-router

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related