Ionic fire event on input text value changes

Question

In Ionic, how can you catch an event on a text input field when its value changes?

The input field:

<input type="search" placeholder="Search" ng-text-change="searchMenu()">

The controller:

// ...
    $scope.searchMenu = function () {
        alert('changed')
        console.log(1);
    };
// ...

Nothing happens when typing into the text field.

Answer 1

Ionic is Angular in a nutshell, and angular has two general ways of watching for changes:

1. Use $scope.$watch:

markup:

 <input type="search" placeholder="Search" ng-model="search" />

and code:

  $scope.$watch('search',function (oldValue, newValue) {
     alert('changed')
     console.log(1)
  });

For the sake of completeness there are also $watchGroup and $watchCollection

2. Using ng-change directive togher with ng-model:

markup:

 <input type="search" placeholder="Search" 
        ng-model="search" 
        ng-change="onSearchChange()" />

and code:

 $scope.onSearchChange = function () {
    alert('changed')
    console.log(1)
}

There are also advanced ways of getting changes, like creating directive that is talking to ngModel directive controller and/or creating custom formatter and parser to work with ng-model.

Answer 2

You need to add an ng-model attribute and use ng-change instead of ng-text-change.

ng-change is a built-in angular directive which fires events when the binded model (ng-model) changes. ngChange documenation

So your html would be like:

<input ng-model="inputValue" ng-change="searchMenu" type="search" placeholder="Search">

In your controller, you need to add a $scope variable like:

$scope.inputValue = ''

Answer 3

It's ng-change not ng-text-change and you must have ng-model on that input element to trigger ng-change event

docs