How to use angularjs ng-click with html5 datalist

javascript html angularjs angularjs-ng-click html-datalist
lukersf picture lukersf · Mar 12, 2014 · Viewed 9.1k times · Source

I'm working with AngularJS and i want to use the directive ng-click when an element of a datalist (html5) is selected.

Here is an example of my actual code:

<label>Search</label>
<input type="text" class="input-search" list="datalistcit" ng-change="changeQuery(queryCity)" ng-model="queryCity" />
<datalist id="datalistcit">
   <option ng-repeat="city in cities" ng-click="goCity(city)" value="{{city.name}}">
   </option>
</datalist>

It doesn't work, never execute the js method goCity.. any idea?

Answer

Stephan Muller picture Stephan Muller · Apr 23, 2015

ng-click won't work on datalist options, as the click event (nor any of the keypress events) doesn't seem to be fired when using the datalist.

You will have to use your ng-change on the function input and extend that to check if the current value is also present in the datalist.

Related questions

Bind input value to ng-click button (send value as parameter)

I'm trying to bind the value from an input field to the parameter of my method on ng-click. Here's what I got, but it doesn't work, and I am not too sure if it's possible to do it this way?: &…

Read More
AngularJS pass string as function to use at ng-click

I want to assign a javascript function to ng-click which name is sourced by a rest service. <li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data"> <a href="{{menu.href}}" data-ng-click="{{menu.javascript}}">{{menu.label}}&…

Read More
AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

Using AngularJS if I set a simple input text box value to something like "bob" below. The value does not display if the ng-model attribute is added. <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40"/&…

Read More