CODEWITHSUNDEEP
javascriptjqueryangularjs
Kaushi
Kaushi

Reputation: 198

javascript - AngularJS - Populating other fields after typeahead Autocomplete

Am new to AngularJS. After long struggle, i found how to use Auto-complete in Angularjs.

Now on selecting values from auto-complete, based on the value selected, other fields needs to be populated. ie. on loading the screen, default values will be loaded in Textbox 1 and Textbox 2. When user selects a new value by auto-compelete in Textbox 1, then the corresponding value in Testbox 2 must be populated. 

<table>
   <tr>
      <th>Project number</th>
      <th>Project Name</th>
   </tr>
   <tr ng-repeat="s in projectListObj">
      <td><input name="projects" type="text" placeholder="Project Number" ng-model="s.project_number" typeahead="s as s.project_number for s in projectData | filter:{project_number:$viewValue}" | limitTo:8" class="form-control"></td>
     <td><input type="text" name="proj-name" placeholder="Project Name" ng-model="s.project_name"/></td>
   </tr>
</table>

Upvotes: 0

Views: 841

Answers (1)

jstuartmilne
jstuartmilne

Reputation: 4488

You can put a watch on your ng-model. When you get a change, you update the other models for instance

$scope.$watch('BillDate1', function (newval, oldval) {
        verfifyDate();
        if (newval != undefined)
            $scope.SearchModel.OtherVal[0] = newval;
        if (newval == null)
            $scope.SearchModel.OtherValTwo[0] = '';
    });

A much cleaner way is in the template use

      <input type="text" name="Person Contacted" 
typeahead="a as a.Name for a in getCustomerContactDetails($viewValue)"
model="s.allCustomerContact.Name" typeahead-on-select='s.onSelectContactPerson(allCustomerContact.Name)' >

On your specific case, I think that what you want is to put the whole on the typeahead:

<td><input type="text" name="proj-name" placeholder="Project Name" ng-model="s"  uib-typeahead="r as r.project_name for r in projectData"/></td>

this way you can show both number and name, since you are specifying it in the as statement. Here is a plunker

https://plnkr.co/edit/MzYHvdQvZ5LALI3Ge2av?p=preview

I've used the project_name since it seems clearer with the typeahead

Hope it helps

Upvotes: 2

Related Questions