How to watch two expressions which have separate listeners in angularjs?

Question

How to watch two expressions which have separate listeners in angularjs?

133 Views Asked by BHARATH RAJ At 03 April 2025 at 06:53

I need to watch two expressions such that each expression have a separate listener. so i wrote two $watch() methods. Is it possible to write both in a single watch statement.

Thanks for ur response, I mean to say for each expression it have a separate listener, (i have two expressions and two listeners i.e one listener for one expression and other listener for second expression) so how to achieve it using single watch() method.

Original Q&A

There are 3 best solutions below

squiroid On 25 June 2015 at 07:19

You can use $watchGroupor $watchCollection

Create an array of your different expression and you will get the result in single listner :)

Docs

Hope it helps :)

Nitin Varpe On 25 June 2015 at 07:51

Try this.

$scope.$watch('[first,second]', function () { ... }, true);

REFERENCE

**manoj kumar c.a** · Accepted Answer

https://plnkr.co/edit/JvJQ90tLcpS0x79ZnDvr?p=preview

<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8">
  <title>Controller example Plunker</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script src="app.js"></script>
</head>

<body>
  <h1>Welcome Watch</h1>

  <div ng-controller="SpicyCtrl">
    <div>
      <label>First</label>
      <input type="text" ng-model="watch1" />
    </div>
    <br/>
    <div>
      <label>Second</label>
      <input ng-model="watch2" />
    </div>


    <p>First input value{{watch1}}</p>
    <p>Second input value {{watch2}}</p>

  </div>


</body>

</html>
var app = angular.module('angularjs-starter', []);

app.controller('SpicyCtrl', function($scope) {

   $scope.$watch('[watch1,watch2]',function(a,b,c){

      if((b[0]!==undefined||a[0]!==undefined) && b[0]!==a[0]){
        //functionality for first watchtrigger
        alert('watch1 changed')
      }
      if((b[1]!==undefined||a[1]!==undefined) && b[1]!==a[1]){
         //functionality for second watchtrigger
        alert('watch2 changed')
      }

    })

});

How to watch two expressions which have separate listeners in angularjs?

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in WATCH

Trending Questions

Popular # Hahtags

Popular Questions