0

I am currently using a <datalist> for easy lookup. Each <option> in my datalist has a data-sysid attribute which acts as the actual value I need. Currently, I am using ng-model to set the id variable. However, by default, ng-model uses the value attribute. Is there any way to make ng-model use the value set in my data-sysid attribute instead of the value?

Here is what I currently have:

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.id = "";
  });

angular.element(document).ready(() => {angular.bootstrap(document, ['myApp']);});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-controller="myController">
  <input list="items" id="item-choice" name="item-choice"
               placeholder="Choose an item" ng-model="id" />

  <datalist id="items">
    <option value="Item1" data-sysid="xyz">
    <option value="Item2" data-sysid="abc">
    <option value="Item3" data-sysid="123">
  </datalist> 
  
  {{ id }}
  <!-- I would like this to display data-sysid value instead -->
</div>

My desired behaviour would be like so:

  • if I was to select "Item1" the display (id) would be xyz
  • if I was to select "Item2" the display (id) would be abc
  • if I was to select "Item3" the display (id) would be 123

Is there any way to achieve this using angularjs (preferably without jQuery)?

Improve this question
4
  • you can't use ng-model on datalist. There is already a same question on SO. stackoverflow.com/questions/29531889/… Commented Dec 30, 2019 at 4:50
  • 1
    Does this answer your question? In AngularJS how to use datalist Commented Dec 30, 2019 at 4:50
  • Hi @JeremyJStarcher I have looked at the duplicate question. It seems to be about how to model the input values (both while the user is entering them and when selected) to a particular variable. My question is different as it is about how to get the value of the data-* attribute from the selected value, not how to model the value attribute. Commented Dec 30, 2019 at 5:47
  • 1
    Fair enough... i've re-opened the question. Commented Dec 30, 2019 at 5:49
Related questions
2
Retrieving the attribute value using jquery
1
Retrieving the data from a ng-model
0
Get data-attribute value with angular
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.