为服务器端过滤和分页构建 Angular 应用程序

Posted 2023-02-19

【中文标题】为服务器端过滤和分页构建 Angular 应用程序

【英文标题】：Structuring an angular app for server side filtering and pagination

【发布时间】：2017-07-24 15:59:03

【问题描述】：

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

应用上下文：

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

使用的方法：

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

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

尚未使用此方法，但正在考虑尝试一下 单击单选按钮时，以查询参数的形式推送浏览器 url 中的数据。监听指令中的 url 更改事件并触发服务器调用

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

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

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

【问题讨论】：

请添加一些代码。到目前为止，您尝试过什么？

我无法在此处添加代码。它太大了。我尝试的是使用单选按钮和指令创建过滤器来列出电影。获取电影的网址基于过滤器无线电模型

所以请创建一个 plnkr。 Plnkr 允许你添加很多代码 :)

plnkr.co/edit/uFXjc82B0KJ6ychwRDx7?p=preview 你要求的小伙子

为什么不对指令使用回调参数而不是事件？您可以从角度文档中获取示例：plnkr.co/edit/?p=preview

【参考方案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 的值来发出请求。改变它们的值，你就改变了请求。

这正是您需要的功能。