CODEWITHSUNDEEP
javascriptangularjsionic-framework
user2877989
user2877989

Reputation: 703

Ionic fire event on input text value changes

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.

Upvotes: 6

Views: 20005

Answers (3)

vittore
vittore

Reputation: 17579

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

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

Upvotes: 13

MHX
MHX

Reputation: 1601

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

Upvotes: 5

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

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

docs

Upvotes: 3

Related Questions