使用 $watch 两个变量 angularjs答案

【问题标题】：Using $watch for two variables angularjs使用 $watch 两个变量 angularjs
【发布时间】：2014-10-10 07:34:16
【问题描述】：

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

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 不包含第一个变量？

【问题讨论】：

您能否在此处添加您的 UI 下拉绑定代码，以查看它是否与 firstVariable 存在绑定问题。
我添加了完整的例子:)

标签： angularjs angularjs-scope

【解决方案1】：

使用$watchCollection:

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

});

或者，如果您使用 angular 1.3，请使用 $watchGroup：

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

})

【讨论】：

我测试了你的第一个选项，我可以看到 newValues 和 old values 数组包含两个未定义的元素 ....
那么serviceName.Object.x 很可能是未定义的。

【解决方案2】：

您也可以在您的选择上使用 ng-change。 ng-change 将调用一个执行您的逻辑的函数

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

它会在你的模型发生变化时调用该函数，就像 $watch 一样。

【讨论】：