CODEWITHSUNDEEP
angularjs
texas697
texas697

Reputation: 6397

How to bind typeahead selection to input fields

I have a modal that is for creating a new Job. There is a typeahead input to search for the related Customer. When I select a Customer from that list I need the properties to populate input fields. I made a plunkr but I can't get the typeahead to work. plunkr

<input type="text" class="form-control" ng-model="CustomerName"
  typeahead="job.Customers[0].CustomerName for job in jobArray  | filter:$viewValue"
   placeholder="Enter Customer" typeahead-on-select="selectedCustomer = $item;">


<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">C. Name</span>
       <input type="text" class="form-control" ng-model="CustomerName"
         typeahead="job.Customers[0].CustomerName for job in jobArray  | filter:$viewValue"
         placeholder="Enter Customer" typeahead-on-select="selectedCustomer = $item;">
  </div>
</div>
<div class="form-group">
   <div class="input-group">
       <span class="input-group-addon">C. Address</span>
         <input ng-model="CustomerAddress" class="form-control" type="text">
    </div>
</div>

Upvotes: 2

Views: 702

Answers (1)

miensol
miensol

Reputation: 41608

You missed ng-app="testApp" declaration.

typeahead attribute should look like this:

typeahead="customer.customerName for customer in customers | filter:$viewValue"

Not sure what you wanted to achieve with job.Customers[0].CustomerName for job in customers.

Lastly I can only guess but I think you wan't to be able to enter customers data both through typeahead and inputs below right? If that's the case you should change the typeahead-on-select to

typeahead-on-select="selectCustomer($item)"

and add selectCustomer in your controller:

$scope.selectCustomer = function(customer){
  $scope.customerName = customer.customerName;
  $scope.customerAddress = customer.customerAddress;
};

See updated plunker.

Upvotes: 1

Related Questions