1

AngularJS を使用してフィルター処理されたコレクションへの変更を監視する際に興味深い問題があります。

プロパティの1つを使用してフィルタリングされ、次を使用してレンダリングされるスコープ内のアイテムのコレクションがありますng-repeat。

    <input ng-model="searchName" placeholder="search"/>
    <ul>
        <li ng-repeat="i in (filteredItems = (items | filter:searchName))">
            {{i.name}}
        </li>
    </ul>

filteredItems現在表示されているアイテムに依存するスコープ変数を更新できるように、への変更を監視したいと思います。この例では、変数を更新して現在のfilteredItems長さを保持し、それをユーザーに表示したいとします。

<p>filtered items length: {{filteredItemsLen}}</p>

コントローラーにリスナーを登録しましたfilteredItems：

$scope.$watch('filteredItems', function(newItems, oldItems) {
    $scope.filteredItemsLen = newItems.length;
}, true);

ただし、このリスナーは、 に変更が加えられた瞬間に呼び出されるとは限りませんfilteredItems。以下のフィドルで、これを試してください：

  1. フィルター入力に「aa」を入力します。表示されるリストが更新され、リスナーが呼び出されないため、表示される長さが正しくありません。
  2. フィルター入力に「aaa」を入力します。表示されるリストが更新され、リスナーが2 回呼び出されます (最初に前のフィルターからのデータで、次に現在のデータで)。表示される長さは正しいです。

これがフィドルです。コンソール ログを見て、リスナーが実際にいつ呼び出されたかを確認してください。

http://jsfiddle.net/7QJJK/8/

興味深い観察:{{filteredItems}}ページのどこかで使用すると、リスナーが正しく呼び出されます。

AngularJS についてわからないことがありますか? 何か案は？

4

2 に答える 2

1

jsfiddle が使用するのは Angular 1.1.1 のバグだと思います。1.1.5 に更新すると、期待どおりに動作し、フィルタリングされた一致の数が変わるたびに $watch が実行されます - http://jsfiddle.net/7QJJK/10/

于 2013-08-12T12:55:19.320 に答える