使用数据列表属性自动填充时如何检测文本更改

Question

我正在尝试让输入字段对文本更改事件做出反应。 该字段具有datalist属性以具有自动datalist功能。

据我了解，如果我想随用户类型（而不是onBlur）挂接到事件，则可以使用ng-keyup 。

当用户键入某些内容时，它工作正常，但是当他单击“自动完成”框中的选项时，它不能正常工作。

我可以听另一个事件，以便在用户自动完成选择时触发动作吗？

我也尝试了ng-keydown和ng-keypress但没有成功。

这是我声明输入框的方式：

<input id="id" list="someList" ng-model="myModel" ng-keyup="functionToCall()">

PS：我正在使用Angular Dart。

编辑：

所以我重试了同一件事，但是我删除了ng-model属性，以确保它在更新模型时不会引起摩擦。 所以在我看来：

<input id="bob" list="itemOptions" placeholder="Type an item name" ng-change="onItemNameChange2()" >

在我的组件中：

void onItemNameChange2() {
  print("changed");
}

并且它仅在onBlur()时changed打印。

我也尝试删除列表属性：

<input id="bob" placeholder="Type an item name" ng-change="onItemNameChange2()">

并且仅在onBlur时才打印（因此仅键入不会使print（）方法被调用，我真的必须离开输入字段）

Answer 1

您可以使用ng-change 。 我在JavaScript中做了一个小提琴例子。 它在Dart中的工作原理应相同。

list和ng-change附加到输入。

<input type="text" ng-model="myData" list="myList" ng-change="textChange()" />
<datalist id="myList">
    <option ng-repeat="item in items" value="{{item}}" />
</datalist>

ng-change实际上不是html事件，而是在视图数据更新时触发的角度事件。