ng-repeatでカスタムフィルタを使用するng-optionsのパフォーマンスの問題

Question

パフォーマンス上の問題が発生しています。私は、ng-repeatの下にあるng-optionsでカスタムフィルタを使用しています。サンプルコードの下

：私のコントローラの$ scope.itemsで

<div ng-repeat="item in items"> 
<select ng-model="User[item.id]" ng-options="translatedKey.option as translatedKey.value|optionTranslater for translatedKey in item.translatedKeys"> 
</div> 

は100個のフィールドが含まれている定義されています。 すべてのItemでは、item.translatedKeysには1〜500個のフィールドが含まれます。

は今、私の問題は、すべての$ optionTranslaterをダイジェストである約100 * 500回呼び出されています。

ページが遅くなります。私は自分のカスタムフィルタで私の動的なページでカスタムフィルタを使用する必要があります。私はまた角度トランスレータを使用しています。

誰もがより良いパフォーマンスを行い、より良い解決策を提案でした。事前に

おかげで、

Answer 1

角度は、何かが変わった後のサイクルを消化$二回（日付フィルタを含む）すべての単一のフィルタを実行します。これはパフォーマンスに大きな影響を与えます。最初の実行は、変更を検出した$$ウォッチャからのもので、2番目の実行は、更新された値を必要とする更なる変更があるかどうかを確認することです。

$フィルタプロバイダを使用するようにDOMフィルタを変更することができます。DOMフィルタをDOMに解析する前にコントローラでフィルタを実行すると、ビューに送信する前にデータを前処理しますDOMを解析し、インラインフィルタの構文を理解する。これにより、パフォーマンスが向上する可能性があります。 - >オプションは一度だけ各選択ごとにレンダリングされます

<div ng-repeat="item in items"> 
<select ng-model="User[item.id]" ng-options="translatedKey.option as translatedKey.value|optionTranslater for translatedKey in ::item.translatedKeys"> 
</div> 

：item.translatedKeysが静的であれば、私は以下のように結合1回をお勧めし

$scope.translatedKey = $filter('optionTranslater')($scope.translatedKey); 

Answer 2

：それはこのような何かを行くだろう。 $ダイジェストサイクルで毎回ではありません。

---

これを上記の回答に記載されているように、コントローラの翻訳と組み合わせることができます。 - >あなたはもっと速い結果を得るでしょう。 すべてのオプションは、選択されている回数だけ変換されます。