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

Question

tl; dr在客户端使用单选按钮过滤器构建支持在服务器端进行过滤和排序的角度应用程序的最佳方法是什么？

应用程序的上下文:

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

使用的方法:

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

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

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

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

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

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

Answer 1

好吧，如果我是你，我会更改 my 中的一个变量$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来发出请求。改变它们的值，你就改变了请求。

这正是您需要的功能。