CODEWITHSUNDEEP
angularjs
pradeep
pradeep

Reputation: 23

How to bind object to ng-model in datalist selected option ng-repeat

In text box i want to show customer name as per user enter key if user enter A letter then all customer name starting with A letter display in search box.for that i am using "data-list"

but now problem is that if i am writing option value="customer.Name" it display customer Names in text box as per my requirement but at the same time it bind customer Name to ng-model.

I want customer object bind to ng-model

<div ng-app="myApp" ng-controller="myCtrl">

<div class="form-group">
                        <label class="control-label">Customer Name :</label> 
                        <input list="browsers" name="browser" ng-model="selectedcustomer" >

                        <datalist id="browsers">
                            <option ng-repeat="customer in customers" 
                                 value="{{customer.Name}}" >{{customer.Name}}
                                </option>
                        </datalist>
                    </div>

</div>

By writing option value="{{customer}}" it bind selected customer to the ng-model but at the same time it show all customer object in text box that i don't want i want only customer name display in text box

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.customers=[{id :1,Name :'Mahesh',city:'Pune',state:'Maharashtra'},
                  {id :2,Name:'Mayur',city:'surat',state:'Gujrat'},
                  {id :3,Name:'Ram',city:'mumbai',state:'Maharashtra'}];
});

Upvotes: 2

Views: 3701

Answers (2)

Emidomenge
Emidomenge

Reputation: 1524

I'm using ng-Autocomplete which doing perfectly and easily what you're looking for.

Upvotes: 0

Lucian
Lucian

Reputation: 354

There is a nice component from Angular material called md-autocomplete. If you use this component, it will make you're live easier.

Here is the link to the component : auto-complete with the API and here is the link to some demos

Upvotes: 1

Related Questions