How to bind typeahead selection to input fields

Question

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>

The plunkr you've created does not include ui.bootstrap where the typeahead directive is defined in. — miensol
– miensol, Commented Aug 24, 2014 at 13:13
ok, i got it in there, still no luck though? plnkr.co/edit/acUifP4viuu9Whz3ciSW?p=preview — texas697
– texas697, Commented Aug 24, 2014 at 13:19

miensol · Accepted Answer · 2014-08-24 13:43:58Z

1

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.

answered Aug 24, 2014 at 13:43

miensol

41.9k9 gold badges127 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to bind typeahead selection to input fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related