1

我想了解如何通过 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

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

cf=categoryfilter(list, map) -->分类列表

fltr=filter (list, nameFilterString)--> filteredList, name

ordBy=orderBy(list, name)--> orderdList

  1. 首先获取用户选择的类别，将列表传递给下一个过滤器
  2. 过滤依赖于所选类别的输入文本
  3. 根据名称的默认升序对上面 2 中过滤的列表进行排序
  4. 为列表中的每个项目创建一个 html 跨度

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

< 4.ng-repeat=ordererdList 中的配方 | <==3.ordBy(fltr) | <== 2.fltr(cf, nameFilterstring) | <== 1. cf(recipeList , map < category, 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 >
4

1 回答 1

0

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

  1. 排序依据
  2. 筛选
  3. 类别过滤器

最初它们完全按照这个顺序调用

orderby 被通过

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

并返回

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

未更改地传递给 categoryfilter（因为尚未设置过滤器值）
categoryfilter 再次返回未更改的集合

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

调用格式化程序的顺序始终与它们在标记中出现的顺序相同，但并非每次都调用每个过滤器。Angular 识别依赖关系，并且仅在依赖值发生更改时才调用过滤器。

编辑

这个表达式的结果被传递给ng-repeat

ctrl.食谱 | orderBy:'名称' | 过滤器：{名称：ctrl.nameFilterString} | categoryfilter:ctrl.categoryFilterMap

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

编辑2

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

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

于 2014-08-20T12:07:51.703 回答