构建用于服务器端过滤和分页的角度应用程序

Question

TL;博士 使用客户端的单选按钮过滤器构建支持在服务器端进行过滤和排序的角度应用程序的最佳方法

应用的上下文：

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

使用的方法：

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

2. 创建过滤器并传递服务中的数据，只要单击单选按钮就启动事件。收听事件并从服务中接收数据。创建URL并启动服务器调用。

3. 尚未使用此方法，但考虑尝试 单击单选按钮以查询参数的形式推送浏览器URL中的数据。侦听指令内的url change事件并触发服务器调用

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

我对我的两种方法感到不满意，认为还有很大的改进空间。任何人都可以建议一个非常可扩展的方法或改进我正在使用的现有方法的东西。提前谢谢。

**我正在使用IONIC。我想利用pull刷新和无限滚动功能。这些必须放在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"。然后，我的控制器听取此更改事件并调用我的$scope.requestAPI函数。

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

此功能使用$scope.area和$scope.category的值来发出请求。更改其值，您可以更改请求。

这正是您需要的功能。