angularjs - 构建用于服务器端过滤和分页的 Angular 应用程序

Question

tl;博士
构建支持在服务器端使用单选按钮过滤器在服务器端进行过滤和排序的 Angular 应用程序的最佳方法是什么

应用上下文:

我有一个示例电影列表应用程序，其中电影具有流派和风格来对它们进行分类。它们可以根据名称、评级、发布年份进行排序。后端非常清晰，我将过滤器以查询参数的形式传递给 url，并返回数据并解决分页问题。我从客户端创建 url 并将字符串参数附加到它。但是，我在客户端尝试了一些过滤器和排序的实现，但并不满意。每个实现都涉及使用过滤器的单选按钮。我使用了以下方法。

使用的方法:

根据电影的流派和风格创建一些过滤器，在单击一个单选按钮时启动一个事件，在事件中传递过滤器 radio 模型。在 movieListDirective 中监听事件，然后创建 url，然后触发服务器调用。

创建过滤器并在服务中传递数据，每当单击单选按钮时启动事件。监听事件并从服务接收数据。创建 url 并启动服务器调用。

还没有用过这种方法，但想试一试
单击单选按钮以查询参数的形式推送浏览器 url 中的数据。监听指令中的 url 更改事件并触发服务器调用

我也在考虑使用 UI 路由器。为过滤器和排序按钮创建一个抽象状态。将 movieListDirective 放在子状态中。

我只是对我的两种方法不满意，并认为还有很大的改进空间。任何人都可以提出一种非常可扩展的方法或改进我正在使用的现有方法的方法。提前致谢。

**我正在使用 ionic 。我想利用拉动刷新和无限滚动功能。这些必须放在 ionic-content 指令中。因此所使用的方法应满足此要求**

Answer 1

好吧，如果我是你，我会更改 $scope 中的一个变量并使用您的过滤器再次听取其更改请求。

我做了一个Plunker来帮助你。
https://embed.plnkr.co/cNZ1Um7FycaPBjef5LI1/

在这个Plunker中，我添加了ng-model到我的 radio buttons .当这些单选按钮被选中时，它们会用它们的 values 改变我的变量。 .

<input type="radio" value="new" ng-model="area">

上面的这个单选按钮更改 $scope.area值到 "new" .然后，我的 Controller 监听此更改事件并调用我的 $scope.requestAPI功能。

$scope.$watch('area', function() {
    $scope.requestAPI($scope.area, $scope.category);
});

此函数使用 $scope.area 的值和 $scope.category提出请求。改变它们的值，你就改变了请求。

这正是您需要的功能。