I'm trying to have an input field react to text change events. The field has a datalist
attribute to have autocompletion.
As I understand it, if I want to hook on the event as the user types (and not onBlur for example), I can use ng-keyup
.
It works fine when a user types something, but not when he clicks a choice in the autocomplete box.
Is there another event I can listen to, to be able to fire an action when the user autocompletes his choice?
I also tried ng-keydown
and ng-keypress
without success.
Here's how I declared my input box:
<input id="id" list="someList" ng-model="myModel" ng-keyup="functionToCall()">
PS: I'm using Angular Dart.
edit:
So I retried the same thing, but I removed the ng-model
attribute to make sure it wasn't causing friction while updating the model. So in my view :
<input id="bob" list="itemOptions" placeholder="Type an item name" ng-change="onItemNameChange2()" >
and in my component :
void onItemNameChange2() {
print("changed");
}
And it only prints changed
when onBlur()
.
I also tried removing the list attribute:
<input id="bob" placeholder="Type an item name" ng-change="onItemNameChange2()">
and also only prints when onBlur
(so just typing doesn't make the print() method to be called, I really have to leave the input field)
You can use
ng-change
. I made an example fiddle in JavaScript. It should work the same in Dart.The
list
and theng-change
are attached to the input.ng-change
isn't actually an html event it's an angular event triggered when the view data updates.