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

use*_*989 5 javascript angularjs ionic-framework ionic

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

输入字段:

<input type="search" placeholder="Search" ng-text-change="searchMenu()">
Run Code Online (Sandbox Code Playgroud)

控制器:

// ...
    $scope.searchMenu = function () {
        alert('changed')
        console.log(1);
    };
// ...
Run Code Online (Sandbox Code Playgroud)

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

vit*_*ore 12

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

  1. 用途$scope.$watch:

标记:

 <input type="search" placeholder="Search" ng-model="search" />
Run Code Online (Sandbox Code Playgroud)

和代码:

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

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

  1. 使用ng-change指令togher ng-model:

标记:

 <input type="search" placeholder="Search" 
        ng-model="search" 
        ng-change="onSearchChange()" />
Run Code Online (Sandbox Code Playgroud)

和代码:

 $scope.onSearchChange = function () {
    alert('changed')
    console.log(1)
}
Run Code Online (Sandbox Code Playgroud)

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


mhx*_*mhx 5

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

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

所以你的HTML会是这样的:

<input ng-model="inputValue" ng-change="searchMenu" type="search" placeholder="Search">
Run Code Online (Sandbox Code Playgroud)

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

$scope.inputValue = ''