watchcollection吞咽属性被监视 [英] watchcollection swallowing an attribute being watched

问题描述

有两个属性 selCountry 和 SEARCHTEXT 。有一个监视这两个变量的手表。 1日1绑定到select元素，另一种是输入文本字段。

There are two attributes selCountry and searchText. There is a watch that monitors these two variables. The 1st one is bound to a select element, other is a input text field.

我期望的行为是：如果我改变下拉值，文本框应该清除掉，反之亦然。然而，由于路上我写的腕表，首次重点preSS（后与选择元素交互）吞下的关键preSS。

The behavior I expect is: If I change the dropdown value, textbox should clear out, and vice versa. However, due to the way I have written the watch, the first ever key press (post interacting with select element) swallows the keypress.

有一定告诉角度不处理变量的变化发生在这些变量中一些棱角方式;但仍然允许其更改传播到视图...？

There must be some angular way of telling angular not to process the variable changes happening to those variables; yet still allow their changes to propagate to the view...?

  $scope.$watchCollection('[selCountry, searchText]', function(newValues, oldValues, scope){
    console.log(newValues, oldValues, scope.selCountry, scope.searchText);
    var newVal;
    if(newValues[0] !== oldValues[0]) {
      console.log('1');
      newVal = newValues[0];
      scope.searchText = '';
    }
    else if(newValues[1] !== oldValues[1]) {
      console.log('2');
      newVal = newValues[1];
      scope.selCountry = '';
    }
    $scope.search = newVal;
    var count = 0;
    if(records)
      records.forEach(function(o){
        if(o.Country.toLowerCase().indexOf(newVal.toLowerCase())) count++;
      });
    $scope.matches = count;
  });

普拉克

推荐答案

我想您所遇到的问题是，你正确地捕获一只手表的事件，但是当你更改第二个变量的值，它也被抓获watchCollection处理程序，并清除出价值。例如：

I think the problem you are encountering is that you capture a watch event correctly, but when you change the value of the second variable, it is also captured by the watchCollection handler and clears out that value as well. For instance:

selCountry = 'Mexico'

然后更改

selText = 'City'

在code捕捉selText变化如你所期望。它继续清除selCountry。但是，因为你改变的范围对象selCountry的价值，这样做还援引watchCollection然后说：好吧，我现在需要清除掉SEARCHTEXT。

The code captures the selText change as you'd expect. It continues to clear out selCountry. But since you change the value of selCountry on the scope object, doing that also invokes watchCollection which then says "okay I need to now clear out searchText".

您应该能够通过使用NG-改变指令onChange事件处理程序捕获的改变来解决这个问题。请尝试以下

You should be able to fix this by capturing changes using onChange event handlers using ng-change directive. Try the following

// Comment out/remove current watchCollection handler.
// Add the following in JS file
  $scope.searchTextChange = function(){
    $scope.selCountry = '';
    $scope.search = $scope.searchText;
    search($scope.search);
  };
  $scope.selectCountryChange = function(){
    $scope.searchText = '';
    $scope.search = $scope.selCountry;
    search($scope.search);
  };

  function search(value){
    var count = 0;
    if(records)
      records.forEach(function(o){
        if(o.Country.toLowerCase().indexOf(value.toLowerCase())) count++;
      });
    $scope.matches = count;
  }

和在HTML文件

<!-- Add ng-change to each element as I have below -->
  <select ng-options="country for country in countries" ng-model="selCountry" ng-change="selectCountryChange()">
    <option value="">--select--</option>
  </select>
  <input type="text" ng-model="searchText" ng-change="searchTextChange()"/>

新plunker： http://plnkr.co/edit/xCWxSM3RxsfZiQBY76L6?p= preVIEW

这篇关于watchcollection吞咽属性被监视的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！