CODEWITHSUNDEEP
filterdartangular-dartangularjs-ng-repeatdata-formatters
KK.
KK.

Reputation: 703

AngularDart: Filter chaining: does order of filters matter?

I want to understand how Chained Filters/Formatters execution in AngularDart via ng-repeat Directive work.

Can anyone explain how it works in clear and concise manner?

The referenced tutorial does not provide enough detail to get a completely grasp how AngularDart Chained Filter execution works. Below is what I understood from looking at documentation and reviewing portions of AngularDart source code.

Reference Link: http://runnable.com/UvL5t92j1pVCAAAQ/angular-dart-tutorial-chapter-05 original github post: https://github.com/angular/angular.dart.tutorial/issues/74

** Presumed Chain of Execution for Evaluating filters in ng-repeat**

Formatters/Filters gain access to list inside repeaters, such as ng-repeat

recipeList is provided via ng-repeat's scope to cf

cf=categoryfilter(list, map) --> categorizedList

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

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

  1. First get categories selected by user, pass list to next filter
  2. Filter on Inputted text with dependency on categories selected
  3. Order the list which was Filtered in 2 above base on default ascending order by name
  4. Create a html span for each item in list

Html View (from right to left: 1., 2., 3., 4. as indicated below):

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

I want to know how Lists (recipeList) in an angularDart repeater (ng-repeat) passes the list to each consecutive Chained Filter and confirm whether or not order of filters does matter (I believe they do). Is my understanding indicated above correct? 

< 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 >

Upvotes: 1

Views: 481

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657008

The formatters int the expression are in the order

  1. orderBy
  2. filter
  3. categoryfilter

Initially they are called in exactly this order

orderby gets passed

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

and returns

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

which is passed to the categoryfilter unchanged (because no filter value is set yet)
categoryfilter again returns the collection unchanged

After selecting a category only the category formatter is called.
After entering a name (a value for the filter expression) the filter and the categoryfilter formatters are called. Changing the name filter value sometimes triggers only the filter but sometimes also the categoryfilter formatter.

The order the formatters are called is always the same as they appear in the markup, but not each filter is called every time. Angular recognized dependencies and only calls the filters when a dependent value has been changed.

EDIT

The result of this expression is passed to ng-repeat

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

ctrl.receipes is passed to all filters and the result of the last filter is passed to ng-repeat

EDIT2

I just copy the findings reported from KK:

I confirmed the behavior in the debugger. It appears that there should be a slight correction to your answer. orderBy returns its changed list and passes it to filter even if nothing is entered in filter input textbox. Then filter processes null for the input textbox field value. Then filter passes the list unchanged to categoryfilter after which categoryfilter passes the list to ng-repeat.

Upvotes: 0

Related Questions