Watchcollection Swallowing An Attribute Being Watched

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. The b

Solution 1:

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'

You then change

selText = 'City'

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

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);
  };

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

And in your HTML file

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

New plunker: http://plnkr.co/edit/xCWxSM3RxsfZiQBY76L6?p=preview

Solution 2:

I think you are pushing it too hard, so to speak. You'd do just fine with less complexity and watches.

I'd suggest you utilize some 3rd party library such as lodash the make array/object manipulation easier. Try this plunker http://plnkr.co/edit/YcYh8M, I think it does what you are looking for.

It'll clear the search text every time country item is selected but also filters the options automatically to match the search text when something is typed in.

HTML template

<divng-controller="MainCtrl"><selectng-options="country for country in countries"ng-model="selected"ng-change="search = null; searched();"><optionvalue="">--select--</option></select><inputtype="text"placeholder="search here"ng-model="search"ng-change="selected = null; searched();"><br><p>
     searched: {{ search || 'null' }},
     matches : {{ search ? countries.length : 'null' }}
  </p></div>

JavaScript

angular.module('myapp',[])
  .controller('MainCtrl', function($scope, $http) {
    $http.get('http://www.w3schools.com/angular/customers.php').then(function(response){
      $scope.allCountries = _.uniq(_.pluck(_.sortBy(response.data.records, 'Country'), 'Country'));
      $scope.countries = $scope.allCountries;
    });

    $scope.searched = function() {
      $scope.countries = $scope.allCountries;

      if ($scope.search) {
        var result = _.filter($scope.countries, function(country) {
          return country.toLowerCase().indexOf($scope.search.toLowerCase()) != -1;
        });            
        $scope.countries = result;
      }
    };
  });