filter - AngularDart:过滤器链接:过滤器的顺序重要吗？

Question

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

谁能以简洁明了的方式解释它的工作原理？

所引用的教程没有提供足够的细节，无法完全掌握AngularDart链式过滤器执行的工作方式。以下是我通过查看文档和查看AngularDart源代码的部分所了解的内容。

引用链接:
http://runnable.com/UvL5t92j1pVCAAAQ/angular-dart-tutorial-chapter-05
原始的github帖子:https://github.com/angular/angular.dart.tutorial/issues/74

**用于评估ng-repeat中的过滤器的假定执行链**

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

通过ng-repeat的作用域提供给cf

cf = categoryfilter(列表， map )-> categorizedList

fltr = filter(列表，nameFilterString)-> filteredList，名称

ordBy = orderBy(列表，名称)-> orderdList

首先获取用户选择的类别，并将列表传递给下一个过滤器

对输入的文本进行过滤，并取决于所选的类别

根据名称

的默认升序对在上面2中筛选的列表进行排序

为列表

中的每个项目创建一个html span

HTML View (从右到左:1.，2.，3.，4，如下所示):

<4.ng-repeat = recipe in ordererdList | <== 3.ordBy(fltr)| <== 2.fltr(cf，nameFilterstring)| <== 1. cf(recipeList，map <类别，isChecked>)>

我想知道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

表达式的格式化程序按顺序排列

订购由

过滤器

categoryfilter

最初，它们的调用顺序完全相同
orderby获得通过

[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编辑2
我只是复制KK报告的发现:
我确认了调试器中的行为。看来您的答案应该有一些更正。 orderBy返回其更改后的列表，并将其传递给filter，即使未在过滤器输入文本框中输入任何内容。然后filter为输入的文本框字段值处理null。然后filter将列表不变地传递给categoryfilter，之后categoryfilter将列表传递给ng-repeat。