使用数据表与角和列表是键和值的组合

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>

使用这段代码，当我选择一个项目时，它显示的是Id而不是Name。我需要在选择时显示公司的名称。我在这里做错了什么?谢谢。

Answer 1

try this:

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

Answer 2

这可能是一个老问题，但我已经实现了键/值和用户强制选择从Datalist和angularJS如下。

希望它能帮助到一些人。

我的filldropdown()方法是通过api在用户输入上填充数据表。如果没有从数据列表中选择任何项，则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;
                        }
                }
            }

Answer 3

你必须在选择

时设置ng-model

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