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

Question

Вот мой 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>

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

Answer 1

Это может быть старый вопрос, но я получил ключ / значение и обязательный выбор пользователя из Datalist и angularJS, как показано ниже.

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

Мой метод filldropdown() заполняет список данных через api при вводе пользователем. если ни один элемент не выбран из списка данных, то идентификатор будет 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;
                        }
                }

            }

Answer 2

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

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

Answer 3

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

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