输入文本值上的离子点火事件发生变化

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

在Ionic中,当值改变时,如何在文本输入字段上捕获事件?

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.

在文本字段中输入时没有任何反应。

3 个解决方案

#1

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

简而言之,Ionic是Angular,而角度有两种观察变化的一般方式:

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

为了完整起见,还有$ watchGroup和$ watchCollection

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

使用ng-change指令进行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.

还有一些获得更改的高级方法,例如创建与ngModel指令控制器通信的指令和/或创建自定义格式化程序和解析器以使用ng-model。

#2

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

您需要添加ng-model属性并使用ng-change而不是ng-text-change。

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

ng-change是一个内置的角度指令,可在绑定模型(ng-model)发生变化时触发事件。 ngChange文档

So your html would be like:

所以你的HTML会是这样的:

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

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

在您的控制器中,您需要添加$ scope变量,如:

$scope.inputValue = ''

$ scope.inputValue =''

#3

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

它是ng-change而不是ng-text-change,你必须在该输入元素上使用ng-model来触发ng-change事件

docs