Ion fire event when input value changes

Question

In Ionic, how can you catch an event in an input text box when changing its value?

Entry field:

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

Controller:

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

Nothing happens when you type text in a text box.

Answer 1

Ionic Angular in a nutshell, while Angular has two common ways to view changes:

• 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 completeness, there is also $watchGroup and $watchCollection

2. Using the ng-change togher directive 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 to get changes, such as creating a directive that talks to the ngModel directory controller and / or creating custom formatting and a parser to work with the ng model.

Answer 2

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

ng-change is a built-in angular directive that fires events when the associated model ( ng-model ) changes. ngChange documentation

So your html will look like this:

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

In your controller, you need to add the $ scope variable, for example:

$scope.inputValue = ''

Answer 3

This is ng-change , not ng-text-change, and you must have ng-model on this input element to trigger the ng-change event

docs