Datalist 在 ng-model 中输入错误的值答案

【问题标题】：Datalist putting wrong value in ng-modelDatalist 在 ng-model 中输入错误的值
【发布时间】：2019-05-05 19:35:42
【问题描述】：

我正在使用 Angular 1.6

我有一个text input，它连接到datalist。

datalist 选项通过ng-repeat 填充。 value 是一个“id”，但显示的是一个“名称”。

text input 连接到 ng-model。

问题是，当我从数据列表中选择一个选项时，它会用“id”覆盖“name”。因为这就是价值。

我需要保存值，但要显示并能够编辑名称。

这是示例代码：

angular.module('myApp',[]).controller('myCtrl', function() {
    const vm=this;
    vm.people=[{id:1,name:"Bob"},{id:2,name:"Jane"},{id:3,name:"Don"},
               {id:4,name:"Eric"},{id:5,name:"Sally"}];
});

<div ng-app="myApp" ng-controller="myCtrl as vm">
    <pre>{{vm.myName|json}}</pre>
    <label>
        <span>My Name!</span>
        <input type="text" name="name" list="names" ng-model="vm.myName" />
        <datalist id="names">
            <option ng-repeat="person in vm.people" value="{{:: person.id}}">
              {{:: person.name}}
            </option>
        </datalist>
    </label>
</div>

一种解决方案是我可以将ng-change 连接到input，然后在controller 中运行一个过滤函数，如下所示：

// in JS (excerpt)
vm.updateMyName = name => {
    vm.myName = vm.people.filter(n => n.name === name)[0].id
};

<!-- in html (excerpt) -->
<input type="text" name="name" list="names" ng-model="vm.throwAwayValue"
       ng-change="vm.updateMyName(vm.throwAwayValue)" />
<datalist id="names">
    <option ng-repeat="person in vm.people">
      {{:: person.name}}
    </option>
</datalist>

但是，如果有重复的名字，我会搞砸的，因为它会匹配那个名字的 id（我不会说它无论如何都不会是用户友好的，有一个带有重复的下拉列表选项）。而且它似乎也有很多不必要的样板。

还有其他想法吗？

【问题讨论】：

标签： angularjs angularjs-ng-model html-datalist

【解决方案1】：

一个想法是结合对象的两个字段：

<div ng-app="myApp" ng-controller="myCtrl as vm">
    <pre>{{vm.myName|json}}</pre>
    <label>
        <span>My Name!</span>
        <input type="text" name="name" list="names" ng-model="vm.myName" />
        <datalist id="names">
            <option ng-repeat="person in vm.people" 
                value="{{person.id +' '+ person.name}}" >
            </option>
        </datalist>
    </label>
</div>

【讨论】：

【解决方案2】：

另一个想法是AngularJS Material，因为它支持将对象存储为值，同时仅显示某个属性作为选项。使用md-select 和md-option 将允许您将person 变量存储为value，同时仅在选项下拉列表中显示person.name。

【讨论】：