Question

我们希望使用ui-router实现分页（或过滤）。我们不希望每次下次/ prev参数更改时重新加载控制器。我们想要监听事件并使用新的状态参数从API加载数据。

来自我们的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 },
    }
  });

我们的控制器：

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();
  });
}

如果由于reloadOnSearch为false而未引发$ stateChangeSuccess，我们如何跟踪状态参数更改。

P.S。现在我们只是播放自己的活动来解决这个问题，但我正在寻找“自然的”。解决方案：）

Answer 1

Ui Bootstrap有一种非常简单的方式来实现分页。它也很容易与Ui路由器集成！这个链接将带你到分页帮助:) 有趣的编码

Answer 2

感谢@krish我找到了答案：Set URL query parameters without state change using Angular ui-router

在更新位置参数之前使用hack将reloadOnSearch选项更改为false，然后在$ timeout中将其还原为。

但是我认为使用这样的东西更明确：

<form method="post">
            <input placeholder="Forename" type="text" name="fname" id="Forename"><br /><br />
            <input placeholder="Surname" type="text" name="sname"><br /><br />
            <input placeholder="Student Id" type="text" name="studId"><br /><br />
            <input placeholder="Username" type="text" name="uname"><br /><br />
            <input placeholder="password" type="password" name="pass" min="6" max="32"><br /><br />
            <input placeholder="Re-type password" type="password" name="rpass" min="6" max="32"><br /><br />
            <input placeholder="Email" type="" name="email"><br /><br />
            <input placeholder="Re-type Email" type="remail" name="remail"><br /><br />
            <input value="Sign Up" type="submit" name="sign_Up">
        </form>

如何使用Angular Ui-router实现过滤

2 个答案: