Multiple $scope.$watch not working in Angular JS

Question

Can anyone explain why only the first $watch below is firing within the same controller? Both the inputs are text boxes with each ng-model assigned. (thanks in advance)

$scope.$watch('search', function() {
   if ($scope.watch !== ""){
       var filter = "{'name':{'$regex':'(?i).*"+$scope.search+".*'}}";
       fetch(filter);
      };
});


$scope.$watch('id', function() {
    if ($scope.id !== ""){
        var filter = "{'id':{'$regex':'(?i).*"+$scope.id+".*'}}";
        fetch2(filter);
    };
});

Looks OK to me. Have you tried console.log's within each watcher & condition statement? — James
– James, Commented Jul 4, 2017 at 13:16
You have $scope.watch in your if statement. Did you mean $scope.search ? — Sergey Mell
– Sergey Mell, Commented Jul 4, 2017 at 13:21
yeah console log shows nothing for it, but strangely I am finding it will fire (and work ok) if the earlier 'search' model has been populated. Both functions return to the same model but I presumed that should be fine. — Roddic
– Roddic, Commented Jul 4, 2017 at 13:24
Sergey, indeed I did, thanks. Hasn't made any difference re the latter firing but thank you. — Roddic
– Roddic, Commented Jul 4, 2017 at 13:25

Yordan Nikolov · Accepted Answer · 2017-07-04 13:34:58Z

1

Try this syntax and see what you will get in the console

$scope.$watch('id', function(newVal, oldVal) {
    console.log(oldVal, newVal);
});

if log is OK, why dont you try with the newVal like this

$scope.$watch('id', function(newVal, oldVal) {
    if (newVal !== ""){
        var filter = "{'id':{'$regex':'(?i).*"+newVal+".*'}}";
        fetch2(filter);
    };
});

Edited

edited Jul 4, 2017 at 13:34

answered Jul 4, 2017 at 13:17

Yordan Nikolov

2,67815 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Roddic Over a year ago

Yordan, it logs the original and new value in the console log as expected

Yordan Nikolov Over a year ago

Ok, so why dont you try with the newVal? I've edited my answer.

Roddic Over a year ago

Begging your pardon, thanks to your advice re using newVal and oldVal, I was convince it was indeed firing and on checking my backend log I can see the http call being made successfully. So my issue must actually lie in my html rendering of the response. Many thanks for your guidance.

Nainish Modi · Accepted Answer · 2017-07-04 13:24:36Z

0

//Try this
var deregWatchGroup = $scope.$watchGroup(['1stmodelValue', '2ndmodelvalue'], function (newValues, oldValues) {
         console.log(newValues[0], oldValues[0]); //for 1st model value
         console.log(newValues[1], oldValues[1]); //for 2nd model value
         // here you can handle your stuff
 });
  //destroying watch
 $scope.$on('$destroy', deregWatchGroup);

answered Jul 4, 2017 at 13:24

Nainish Modi

4882 silver badges10 bronze badges

Comments

Arun Sahani · Accepted Answer · 2017-07-04 13:27:22Z

0

To watch multiple scope in the same controller, you can use:

$scope.$watchGroup(['search', 'id'], function(newValues, oldValues) {

 newValues[0] -> $scope.search 
 newValues[1] -> $scope.id 

// Then perform your operations.

});

answered Jul 4, 2017 at 13:27

Arun Sahani

726 bronze badges

Comments

Roddic · Accepted Answer · 2017-07-04 13:57:08Z

0

Thank you all. To answer, the issue was in my html rendering of the results and the root cause was my own idiocy. I has an extraneous ng-show which was hiding the results.

answered Jul 4, 2017 at 13:57

Roddic

132 bronze badges

Collectives™ on Stack Overflow

Multiple $scope.$watch not working in Angular JS

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related