2016-03-28 28 views
0

AngularJS için yeni. Uzun mücadeleden sonra, Angularjs'de Auto-complete'i nasıl kullanacağımı buldum.javascript - AngularJS - typeahead sonra diğer alanları doldurma Otomatik Tamamlama

Şimdi, seçilen değere göre otomatik tamamlama değerlerini seçerken, diğer alanların doldurulması gerekir. yani. Ekranı yüklerken, varsayılan değerler Metin Kutusu 1 ve Metin Kutusu 2'ye yüklenir. Kullanıcı Metin Kutusu 1'de otomatik olarak tamamiyle yeni bir değer seçtiğinde, Testbox 2'de karşılık gelen değer doldurulmalıdır.

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

cevap

2

ng modelinize bir saat koyabilirsiniz. Bir değişikliği aldığınızda,

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

Daha net bir yön örneğin diğer modellere güncellemek, Ne istediğini olduğunu düşünüyorum özel davasında

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

kullanmak şablonda olduğu typeahead üzerine bütün koyun: Eğer ifadesi olarak bunu belirtme beri

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

bu yolu, numara ve isim ikisini de gösterebilir. İşte plunker

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

pls

o

+0

u s.project_number izlemek $ için ayrıntılı bir örneğini paylaşabilir yardımcı olur Umut typeahead ile daha net görünüyor bu yana PROJECT_NAME kullandım olduğunu ???? – Kaushi

+0

Tipeahead on-select-select seçeneğini kullanırsanız çok daha iyi bir performans sergiliyor. Hangi elemanın değiştirildiğini bilmek için modeli geçebilirsiniz. '' – jstuartmilne

+0

Eğer bootstrap açısal – jstuartmilne

İlgili konular