Adding a listener on a model in angularjs

All we need is an easy explanation of the problem, so here it is.

I currently have a model which is the value of a search box. The search operation is performing perfectly but I also want yet another feature to be performed when the search text is modified. So i wanna add a listener or watch the model variable. How can I do it?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You’ve got 2 options to cover your use case:

Use the ng-change directive

You can write your input like so:

Search: <input ng-model="search.model" ng-change="changeHandler()">

where the changeHandler is a function defined on a scope.

Use a watch on a scope

by writing in your controller:

$scope.$watch('search.model', function(newVal, oldVal){
    console.log("Search was changed to:"+newVal);
    $scope.search.watch = newVal;
  });

Here is a working plunk illustrating both: http://plnkr.co/edit/Jgb2slcBFzLNKK0JFNyo?p=preview

The difference between the 2 approaches is that ng-change will fire only as a result of user’s iteractions with an input while $watch will fire for any model mutation – triggered from the input control or any other change to the model. So you can preciselly choose on which events you want to react.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply