CODEWITHSUNDEEP
htmlangularjsdatalist
Venu
Venu

Reputation: 184

Data bind not working for datalist in Angular

I have a simple datalist with a list and input field to type or to select.

<input class="form-control control-look-input" type="text" ng-model="loadPointVehicleType.DisplayName" list="listVehicleTypes" autocomplete="off">
<datalist id="listVehicleTypes" >
    <option ng-repeat="type in vehicleTypes" value="{{ type.DisplayName }}"></option>
</datalist>

Now I can see that the saved item got selected on view load. But if you try select a different item from the list the actual list vehicleTypes gets changed. Also I can't get selected item Id from the list through mapping/binding. Which is the roght way to bind the datalist so that I can show correct item on view load? Also on save I need to access current selected item's Id.

Upvotes: 0

Views: 829

Answers (1)

Justin E. Samuels
Justin E. Samuels

Reputation: 887

Trying my best to understand your question, but guessing that what you're asking is why does the physical list that angular is reading from get's changed once selecting a item. This is because you're setting the ng-model in the text input area. So what ever the user enters into the textbox, angular will then bind it to the the object (in this case loadPointVehicleType.DisplayName) upon input (angular two way data binding allows it to be updated without page refresh), thus when you look at your select option, the change made in the textbox is reflected. I would make a "submit" button, and use the ng-click directive to push the new data onto the object, and then have your datalist loop through the object (like you have now), but remove that ng-model and that will get you going. Hope this helps (if not, please provide more information and try to be a little more specific in your question/reply). - Justin

Upvotes: 0

Related Questions