Использование datalist с angular и list является комбинацией ключа и значения

Question

Использование datalist с angular и list является комбинацией ключа и значения

0

Вот мой HTML с угловыми отображениями

<input type="text" id="txtCompany" list="listCompany" placeholder="Company" >
<datalist id="listCompany">
     <select id="_select" name="_select" ng-model="product.CompanyId" 
        ng-options='company.Id as company.Name for company in companyDropdown'/>
</datalist>

Используя этот код, когда я выбираю элемент, он отображает идентификатор, а не имя. Мне нужно отобразить название компании при выборе. Что я здесь делаю неправильно? Благодарю.

Venu 22 июль 2015, в 09:29

Источник

Теги:

html

angularjs

datalist

3 ответа

Ещё вопросы

nzafar · Answer 1 · 2016-05-02T17-06-00.000Z

Это может быть старый вопрос, но я достиг Key/Value и обязательного выбора пользователя из Datalist и angularJS, как показано ниже.

Надеюсь, это поможет кому-то.

Мой метод filldropdown() заполняет datalist через api при вводе пользователя. если ни один элемент не выбран из datalist, тогда id будет равен 0.

<input type="text" autocomplete="off" ng-model="selectedvalue" name="selectedvalue" id="selectedvalue" list="ddresults"   ng-blur="optionselected()"  ng-keyup="filldropdown()" class="form-control" placeholder="{{displayfieldplaceholder}}" /> 

<datalist id="ddresults" >
    <option ng-repeat="vresult in vresults" value="{{vresult.displayfield}}">{{vresult.displayfield}}</option>
</datalist>
<input type="text"  ng-model="selectedid" name="selectedid" id="selectedid">

Javascript

$scope.selectedid;
$scope.selectedvalue;

$scope.filldropdown = function () {
                if ($scope.selectedvalue != "") {
                    var config = {
                        params: {
                            filter: $scope.selectedvalue
                        }
                    };

                    apiService.get($attrs.apiService, config,
                    logLoadCompleted,
                    logLoadFailed);
                }
                else {
                    $scope.vresults = [];
                }

            }

$scope.optionselected = function () {
                $scope.selectedid = 0;
                for (var i=0; i< $scope.vresults.length; i++)
                {
                    if ($scope.vresults[i].displayfield === $scope.selectedvalue)
                        {
                        $scope.selectedid = $scope.vresults[i].ID;
                        break;
                        }
                }

            }

UserNeD · Answer 2 · 2015-07-22T05-37-00.000Z

попробуй это:

<datalist id="listCompany"> 
<option data-ng-repeat="company in companyDropdown" value="{{company.Name}}"> 
</datalist>

user1859022 · Answer 3 · 2015-07-22T06-04-00.000Z

вам нужно установить ng-модель на ваш выбор

<input list="companies">
<datalist id="companies">
   <select ng-model="selectedCompany" ng-options="company.Id as company.Name for company in companyDropdown"></select>
</datalist>

Я попробовал это. Ничто не работает для двухсторонней привязки списка данных.