Using $watch for two variables angularjs

Question

I have a pop up screen in which a user require to select from two drop down lists. After the selections were completed i return the selections to the service and save them in an object.

app.service('OriginalService', [ '$modal',

function ($modal) {
var that = this;

this.filtersMananger = { // my-ng-models for the two drop-down-lists
    firstFilter: "",
    secondFilter: ""
};

this.openDialog = function(){
    var modalInstance = $modal.open({
        templateUrl: 'ModalScreen.html',
        controller: 'ModalController',
        resolve: {
            filtersManagerObject: function () {
                return that.filtersMananger;
            }
        }
    });

    modalInstance.result.then(function (filtersMananger) {
        that.filtersMananger.firstFilter = filtersMananger.selectedFirstFilter;
        that.filtersMananger.secondFilter = filtersMananger.selectedSecondFilter;
    }, function () {

    });
};
}
 ]);

The pop up html:

<div class="data-filters-container">
 <div class="data-filter">
    <label for="filter-data-drop-down">FIRST FILTER</label>
    <select name="filterDataDropDown" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>
  <div class="data-filter col-xs-4">
    <label for="filter-data-drop-down">SECOND FILTER</label>
    <select name="filterDataDropDown" ng-model="filtersMananger.selectedSecondFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>

However, this change is important and i have to call to the controller which knows many other services to send them information regarding this change.

In order to do it i used a watch function in the controller:

 $scope.$watch('OriginalService.filtersMananger.firstFilter + OriginalService.filtersMananger.secondFilter', function (newVal, oldVal) {

        if (newVal !== oldVal) {

           DO SOME LOGIC
        }
    });

I compare between newVal and oldVal because when the app is uploaded the event is called and we enter to this function.

The problem is that the newVal is contains only the value of the secondVariable. Is there any idea why the newVal is not contains also the first variable?

Could you add your UI dropdown bindings code here to see if its a binding issue with the firstVariable. — Krishna Veeramachaneni
– Krishna Veeramachaneni, Commented Oct 10, 2014 at 7:40

ms87 · Accepted Answer · 2014-10-10 07:47:06Z

1

Use $watchCollection:

$scope.$watchCollection('[serviceName.Object.firstVariable,serviceName.Object.secondVariable]', function (newValues, oldValues) {

});

Or if you're using angular 1.3 use $watchGroup:

$scope.$watchGroup(['serviceName.Object.firstVariable','serviceName.Object.secondVariable'],function(newValues, oldValues){

})

answered Oct 10, 2014 at 7:47

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

2 Comments

Aviade Over a year ago

I tested your first options and i can see that newValues and old values arrays holds two elements that are undefined ....

ms87 Over a year ago

Then most likely the serviceName.Object.x is undefined.

Mathieu Bertin · Accepted Answer · 2014-10-10 07:58:23Z

You could also use ng-change on your select. The ng-change will call a function that do your logic

<div class="data-filters-container">
   <div class="data-filter">
      <label for="filter-data-drop-down">FIRST FILTER</label>
      <select name="filterDataDropDown"  ng-change="checkFilterOne()" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
  </div>
  <div class="data-filter col-xs-4">
    <label for="filter-data-drop-down">SECOND FILTER</label>
    <select name="filterDataDropDown" ng-change="checkFilterTwo()" ng-model="filtersMananger.selectedSecondFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>

It will call the function when your model will change that is like a $watch.

Collectives™ on Stack Overflow

Using $watch for two variables angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related