使用$ watch两个变量angularjs

我有一个弹出式屏幕，用户需要从两个下拉列表中进行选择。选择完成后，我将选择返回到服务并将它们保存在一个对象中。

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() { 

    }); 
}; 
} 
]);

的弹出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>

但是，这种变化是很重要的，我有打电话给哪知道许多其他服务，向他们发送有关此更改的信息提供给控制器。

为了做到这一点，我用一个控制器中的手表功能：

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

     if (newVal !== oldVal) { 

      DO SOME LOGIC 
     } 
    });

我的newval和OLDVAL之间比较，因为当应用程序被上传称为事件，我们进入到这个功能。

问题是newVal只包含secondVariable的值。是否有任何想法为什么newVal不包含也是第一个变量？

来源

2014-10-10 Aviade

您可以在这里添加您的UI下拉绑定代码，以查看它是否与firstVariable存在绑定问题。 – 2014-10-10 07:40:14

我添加了完整的示例:) – Aviade 2014-10-10 07:51:41

使用$watchCollection：

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

});

或者，如果你使用的角度1.3使用$watchGroup：

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

})

来源

2014-10-10 07:47:06

我测试了你的第一个选项，我可以看到newValues和旧值数组包含两个未定义的元素.... – Aviade 2014-10-10 07:50:49

然后很有可能'serviceName.Object.x'是未定义的。 – 2014-10-10 07:52:56

它正在工作！谢谢 – Aviade 2014-10-10 08:02:17

你也可以用你的选择NG-变化。的NG-变化将调用完成你的逻辑

<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>

它会调用函数时，你的模式将改变这种状况就像一个$手表的功能。

来源

2014-10-10 07:58:23

使用$ watch两个变量angularjs

回答

相关问题