How to use angularjs ng-click with html5 datalist

Question

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?

Hypnotherapy

You probably need an ng-model in your datalist. I know that it wouldn't work if it were a select tag without an ng-model. – Tutti

not work.. here is en example jsfiddle.net/lukers/MCnL2 – Hypnotherapy

Try my answer here. #23113162 – Hoopoe

Answer 1

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.

Anticlockwise

Answer 2

datalist is same as select, you don't put the event handler in option, you put the event handler in select or input. Also you don't use ng-click, you use ng-change for this.

Hithermost

i put the event in datalist and not work.. here is en example jsfiddle.net/lukers/MCnL2 – Hypnotherapy

I said both ng-change, ng-model needs put in input or select, Do Not put in datalist or option. – Hithermost

Answer 3

<input list="stateList"  name="state" ng-model = "payCntrl.billingAddressService.billingAddress.state">
    <datalist id="stateList">
        <select>
            <option ng-repeat="state in payCntrl.billingAddressService.states | filter : {country : payCntrl.billingAddressService.billingAddress.country}" 
                                    value="{{state.name}}"></option>
       </select>    
   </datalist>

• The name and ng-model are on the input .

  Data :

  states : [{name : "NJ" , country: "USA"} ,  {name : "NY" , country: "USA"} , 
           {name : "GA" , country: "USA"} ,   {name : "TX" , country: "USA"} , 
           {name : "CA" , country: "USA"} , 
           {name : "Delhi" , country: "India"} ,  {name : "Karnataka" , country: "India"} , 
           {name : "Hyderabad" , country: "India"} ,  {name : "West Bengal" , country: "India"} , 
           {name : "Zhejiang" , country : "China"} , {name : "Hubei" , country : "China"},
           {name : "LONDON" , country : "United Kingdom"} , {name : "MANCHESTER" , country : "United Kingdom"}] 
  

Lava