Question

我正在使用Angular 1.6

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

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

text input已连接到ng-model。

问题是，当我从数据列表中选择一个选项时，它会将“名称”替换为“ id”。这就是价值。

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

这是示例代码：

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（我不会说，无论如何，使用重复的下拉列表对用户来说都是不友好的选项）。而且似乎也有很多不必要的样板。

还有其他想法吗？

Answer 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>

Answer 2

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

数据列表在ng-model中放置错误的值

2 个答案: