私は現在、検索ボックスの値であるモデルを持っています。検索操作は完全に実行されていますが、検索テキストが変更されたときにもう1つの機能が実行されるようにしたいと考えています。だから私はlistener
またはwatch
モデル変数を追加したいと思います。どうしたらいいですか?angularjsのモデルにリスナーを追加する
18
A
答えて
38
あなたのユースケースをカバーするために2つのオプションを持っている:changeHandler
がある
Search: <input ng-model="search.model" ng-change="changeHandler()">
:
は、あなたがそうのように、あなたの入力を書くことができng-changeディレクティブ
を使用しますスコープに定義された関数。
は、あなたのコントローラに書き込むことによって、スコープ
に時計を使用します。
$scope.$watch('search.model', function(newVal, oldVal){
console.log("Search was changed to:"+newVal);
$scope.search.watch = newVal;
});
ここで働いているの両方を示すplunk:http://plnkr.co/edit/Jgb2slcBFzLNKK0JFNyo?p=preview
を2つのアプローチの違いはということですng-change
は、ユーザ入力の反復の結果としてのみ発火し、$watch
は、モデル突然変異に対して起動します。入力制御、またはモデルへの他の変更が含まれます。したがって、反応させたいイベントを正確に選択することができます。
+1
ところで、これは 'ngModel'値に' $ watch'を使うのは良い習慣ではないことを理解しました。私が読んだところによると、 '$ watch'は本質的にスコープリスニングに専念していますが、ngChangeは' ngModel'の変更を聞いていますが、誤解されるかもしれません。 –
関連する問題
- 1. AngularJs:モデルに基づいてクラスを追加する
- 2. leftBarButtonItemにリスナーを追加
- 3. キャンバスポイントにリスナーを追加する
- 4. エディタグリッドパネルにリスナーを追加する
- 5. ListViewにリスナーを追加する
- 6. 数字ピッカーウィジェットにリスナーを追加する
- 7. flex + papervisionでDAEモデルをインタラクティブ(リスナーを追加)
- 8. ArrayListにリスナーを追加します
- 9. 多くのボタンにリスナーを追加リソース
- 10. CKEditor selectPageリスナーを追加する方法
- 11. AngularJS - $ cookieに配列を追加する
- 12. コンポーネントラッパーにdiretictiveバリデーターを追加する - AngularJS
- 13. ロード中にAngularJSファイルを追加する
- 14. 変更リスナーをマーカーに追加
- 15. SimGrid。 masterworkerモデルに追加のパラメータを追加するには?
- 16. AngularJS PouchDB変更リスナー
- 17. extjsのチェックボックスグループの各チェックボックスにリスナーを追加する方法
- 18. Eclipseのデフォルトのコードエディタにリスナーを追加する方法は?
- 19. このリスナーをアクティビティに追加する方法
- 20. Java VaadinのoptionsGroupにリスナーを追加する方法は?
- 21. JTable(Java)にリスナーのタイプを追加する方法は?
- 22. JTable行のイメージにリスナーを追加する
- 23. 既存のAzureアプリケーションゲートウェイに新しいリスナーを追加する
- 24. Android ExpandableLists&DoubleTapジェスチャーの追加、リスナーの追加方法
- 25. リスナーをGoogle Mapsマーカーに動的に追加する
- 26. Django:モデルをフォームセットに追加
- 27. リストにモデルを追加する
- 28. DBIモデルにメソッドを追加する
- 29. カスタムフィールドをモデルに追加する方法
- 30. コレクションにモデルを追加する
jqueryを使用していますか? – SteveP
@SteveP No. jqueryを使用していません。 – Rahul