Menu
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?
610
The datalist tag is introduced in HTML5. The <datalist> tag should be used with an <input< element that contains a "list" attribute. The value of "list" attribute is linked with the datalist id.
The ng-click directive tells AngularJS what to do when an HTML element is clicked.
Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.
Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time.
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.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
