Question

我想了解链式过滤器/格式化程序如何通过ng-repeat指令工作在AngularDart中执行。

任何人都能以清晰简洁的方式解释它是如何运作的吗？

引用的教程没有提供足够的细节来完全掌握AngularDart Chained Filter执行的工作原理。以下是我通过查看文档和查看AngularDart源代码部分的理解。

参考链接： http://runnable.com/UvL5t92j1pVCAAAQ/angular-dart-tutorial-chapter-05 原始github帖子：https://github.com/angular/angular.dart.tutorial/issues/74

**推定执行链以评估ng-repeat中的过滤器**

格式化程序/过滤器可以访问转发器内的列表，例如ng-repeat

recipeList通过ng-repeat的范围提供给cf

cf = categoryfilter（list，map） - ＆gt; categorizedList

fltr = filter（list，nameFilterString） - ＆gt; filteredList，name

ordBy = orderBy（list，name） - ＆gt; orderdList

首先获取用户选择的类别，将列表传递给下一个过滤器
过滤依赖于所选类别的输入文本
按名称
为列表中的每个项目创建一个html范围

Html View（从右到左：1.，2.，3.，4，如下所示）：

＆LT; 4.ng-repeat = ordererdList中的配方| ＆lt; == 3.ordBy（fltr）| ＆lt; == 2.fltr（cf，nameFilterstring）| ＆lt; == 1. cf（recipeList，map＆lt; category，isChecked＆gt;）＆gt;

我想知道angularDart转发器（ng-repeat）中的列表（recipeList）如何将列表传递给每个连续的链式过滤器，并确认过滤器的顺序是否重要（我相信它们确实如此）。我的理解是否正确？

< li class="pointer"
          ng-repeat="recipe in ctrl.recipes | orderBy:'name' | filter:{name:ctrl.nameFilterString} | categoryfilter:ctrl.categoryFilterMap" >
.... repeated dom elements omitted here for clarity
< /li >

Answer 1

表达式中的格式化程序的顺序为

ORDERBY
过滤
categoryfilter

最初，他们按照这个顺序被调用

订单被传递

[Appetizers, Salads, Soups, Main Dishes, Side Dishes, Desserts, Desserts]

并返回

[Desserts, Appetizers, Salads, Desserts, Side Dishes, Soups, Main Dishes]

传递给categoryfilter不变（因为尚未设置过滤值）
categoryfilter再次返回集合

选择类别后，仅调用类别格式化程序输入名称（过滤器表达式的值）后，将调用过滤器和categoryfilter格式化程序。更改名称过滤器值有时会仅触发过滤器，但有时也会触发categoryfilter格式化程序。

调用格式化程序的顺序始终与它们在标记中显示的顺序相同，但不是每次调用每个过滤器。 Angular识别的依赖项，仅在依赖值更改时才调用过滤器。

修改

此表达式的结果将传递给ng-repeat

ctrl.recipes | orderBy：'name'| filter：{name：ctrl.nameFilterString} | categoryfilter：ctrl.categoryFilterMap

ctrl.receipes传递给所有过滤器，最后一个过滤器的结果传递给ng-repeat

EDIT2

我只是复制KK报告的结果：

我确认了调试器中的行为。似乎应该对您的答案稍作修正。即使在过滤器输入文本框中未输入任何内容，orderBy也会返回其更改后的列表并将其传递给filter。然后filter处理null输入文本框字段值。然后filter将列表未更改为categoryfilter，之后categoryfilter将列表传递给ng-repeat。

AngularDart：过滤链：过滤器的顺序是否重要？

1 个答案:

修改

EDIT2