CODEWITHSUNDEEP
htmlangularjsdatalist
Venu
Venu

Reputation: 184

Using datalist with angular and list is combination of key and value

Here is my HTML with angular mappings

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

Using this code when I select an item it is displaying the Id and not the Name. I need to display the Name of company on selection. What am I doing wrong in here? Thanks.

Upvotes: 0

Views: 7464

Answers (3)

nzafar
nzafar

Reputation: 11

It may be an old question but i have achieved Key/Value and user mandatory selection from Datalist and angularJS as below.

Hope it will help some one.

My filldropdown() method is filling datalist through api on user input. if no item is selected from the datalist then the id will be 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;
                        }
                }

            }

Upvotes: 1

user1859022
user1859022

Reputation: 2685

you have to set ng-model on your select

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

Upvotes: -1

UserNeD
UserNeD

Reputation: 1509

try this:

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

Upvotes: 1

Related Questions