Даталист ставит неверное значение в ng-модели - PullRequest
Новая
       45

Даталист ставит неверное значение в ng-модели

0 голосов
/ 05 мая 2019

Я использую Angular 1.6

У меня есть text input, который подключен к datalist.

Опции datalist заполняются через ng-repeat. value является «идентификатором», но отображается «имя».

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"}];
});

<code><div ng-app="myApp" ng-controller="myCtrl as vm">
    <pre>{{vm.myName|json}}

Одним из решений является то, что я мог бы подключить 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>

Тем не менее, я облажался, если есть повторяющиеся имена, так как это будет соответствовать идентификатору этого имени (я не буду вдаваться в это, в любом случае было бы неудобно иметь выпадающий список с дубликатом). опции). И это также похоже на ненужный шаблон.

Есть еще идеи?

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

Другая идея заключается в AngularJS Material , потому что он поддерживает сохранение объекта в качестве значения, в то время как в качестве опции отображается только определенное свойство.Использование md-select и md-option позволит вам сохранить переменную person как value, при этом отображая только person.name как то, что отображается в раскрывающемся списке параметров.

0 голосов
/ 06 мая 2019

Одна из идей - объединить два поля объекта: 

<code><div ng-app="myApp" ng-controller="myCtrl as vm">
    <pre>{{vm.myName|json}}
...