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 などのリピーター内のリストにアクセスできます

レシピリストは ng-repeat のスコープを介して cf に提供されます

cf=categoryfilter(リスト、マップ) --> categorizedList

fltr=filter (list, nameFilterString)-->filteredList, 名前

ordBy=orderBy(リスト、名前)--> orderdList

  1. 最初にユーザーが選択したカテゴリを取得し、リストを次のフィルタに渡します
  2. 選択したカテゴリに依存する入力テキストのフィルター
  3. 上記 2 でフィルタリングされたリストを名前のデフォルトの昇順で並べ替えます
  4. リスト内の各アイテムの html スパンを作成します

Html ビュー (右から左へ: 1.、2.、3.、4. 以下に示すように):

< 4.ng-repeat=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 >
4

1 に答える 1

0

式のフォーマッタは次の順序になっています

  1. orderBy
  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:'名前' | フィルター:{name:ctrl.nameFilterString} | categoryfilter:ctrl.categoryFilterMap

ctrl.receipesすべてのフィルターに渡され、最後のフィルターの結果がに渡されますng-repeat

EDIT2

KKから報告された調査結果をコピーするだけです。

デバッガで動作を確認しました。あなたの答えにわずかな修正が必要なようです。フィルタ入力テキストボックスに何も入力されていない場合でもorderBy、変更されたリストを返し、 に渡します。filter次に、入力テキスト ボックス フィールドの値をfilter処理します。null次にfilter、変更されていないリストをcategoryfilterにcategoryfilter渡し、その後リストを に渡しng-repeatます。

于 2014-08-20T12:07:51.703 に答える