javascript - 从datalist angularjs获取数据属性值

Question

我目前正在<datalist>使用方便查找。我的数据列表中的每个<option>都有一个data-sysid属性，它充当我需要的实际值。目前，我正在使用ng-model设置id变量。但是，默认情况下，ng-model使用该value属性。有什么方法可以ng-model使用我的data-sysid属性中设置的值而不是值？

这是我目前拥有的：

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>

我想要的行为是这样的：

• 如果我要选择"Item1"显示 ( id) 将是xyz
• 如果我要选择"Item2"显示 ( id) 将是abc
• 如果我要选择"Item3"显示 ( id) 将是123

有没有办法使用angularjs（最好没有jQuery）来实现这一点？

标签： javascriptangularjsangularjs-ng-model