在客户端使用单选按钮过滤器构建支持在服务器端进行过滤和排序的角度应用程序的最佳方法是什么
应用程序的上下文：
我有一个示例电影列表应用程序,其中电影具有流派和风格来分类它们.它们可以根据名称,评级,发布年份进行分类.后端非常清楚,我以查询参数的形式将过滤器传递给url,并返回数据并且还解决了分页问题.从客户端我创建了url并将字符串params附加到它.但是我在客户端尝试了很少的过滤器和排序实现,并且不满意.每个实现都涉及使用单选按钮进行过滤.我使用了以下方法.
使用的方法：
>根据电影的流派和风格创建一些过滤器,单击一个单选按钮时启动事件,在事件中传递过滤器 – 无线电模型.在movieListDirective中侦听事件,然后创建url,然后触发服务器调用.
>创建过滤器并传递服务中的数据,每当单击单选按钮时启动事件.收听事件并从服务中接收数据.创建URL并启动服务器调用.
>尚未使用这种方法,但考虑尝试一下
单击单选按钮以查询参数的形式推送浏览器URL中的数据.在指令中侦听url change事件并触发服务器调用
我也在考虑使用UI路由器.为过滤器和排序按钮创建一个抽象状态.将movieListDirective放在子状态中.
我对我的两种方法感到不满意,认为还有很大的改进空间.任何人都可以建议一个非常可扩展的方法或一些东西,以改善我正在使用的现有方法.提前致谢.
**我正在使用IONIC.我想利用pull刷新和无限滚动功能.这些必须放在ionic-content指令中.因此,所使用的方法应满足此要求**
解决方法
我让一个Plunker来帮助你.
https://embed.plnkr.co/cNZ1Um7FycaPBjef5LI1/
在这个Plunker中,我将ng-model添加到我的单选按钮中.选择这些单选按钮后,它们会使用其值更改变量.
<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的值来发出请求.更改其值,您可以更改请求.
这正是您需要的功能.
