2016-03-28 4 views
0

Bin neu bei AngularJS. Nach langem Kampf habe ich herausgefunden, wie man Auto-Complete in Angularjs benutzt.javascript - AngularJS - Füllen anderer Felder nach Typahead Autocomplete

Wenn Sie nun Werte für die automatische Vervollständigung auswählen, müssen andere Felder entsprechend dem ausgewählten Wert ausgefüllt werden. dh. Beim Laden des Bildschirms werden die Standardwerte in Textfeld 1 und Textfeld 2 geladen. Wenn der Benutzer in Textfeld 1 einen neuen Wert durch automatisches Erzwingen auswählt, muss der entsprechende Wert in Testbox 2 ausgefüllt werden.

<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> 

Antwort

2

Sie können Ihr ng-Modell überwachen. Wenn Sie eine Änderung erhalten, können Sie die anderen Modelle, zum Beispiel aktualisieren

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

Ein viel sauberer Weg ist in der Vorlage verwenden

 <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)' > 

Auf Ihrem speziellen Fall, ich glaube, dass das, was Sie wollen, ist zu das ganze wird auf dem 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> 

diese Weise können Sie sowohl Anzahl und Namen zeigen kann, da man es in der als Anweisung angeben. Hier ist ein Plunker

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

ich die project_name benutzt habe, da es scheint klarer mit dem typeahead

Hoffe, es hilft

+0

u kann ein ausführliches Beispiel für $ beobachten in s.project_number teilen pls ???? – Kaushi

+0

Ist viel besser Leistung, wenn Sie den Typeahead-on-select verwenden. Um zu wissen, welches Element geändert wurde, können Sie das Modell übergeben. '' – jstuartmilne

+0

Ich nehme an, dass Sie typeahead vom bootstrap angular verwenden – jstuartmilne

Verwandte Themen