Asenkron yükü olan açısal önyükleme tipi yazım kafası,

Question

'un arkasında bir karakterdir. Aşağıdaki yönerge kodunu bir yönerge uyguladım.

İşte

<div> 
    <input type="text" 
      ng-model="company" 
      uib-typeahead="company as company.name for company in companyByName($viewValue)" 
      typeahead-loading="loadingCompanies" 
      typeahead-no-results="noCompanyResults" 
      class="form-control"> 
    <i ng-show="loadingCompanies" class="glyphicon glyphicon-refresh"></i> 
    <div ng-show="noCompanyResults"> 
     <i class="glyphicon glyphicon-remove"></i> No Results Found 
    </div> 
</div> 

JavaScript'tir: Burada

HTML

scope.companyByName = function() { 
    var companyName = scope.company.name ? scope.company.name : scope.company; 
    var searchTerms = {name: companyName, startRow: 0, endRow: 20}; 

    return $http.post("backend/get/companies.php", searchTerms).then((result) => { 
     $log.info("Companies", result.data.results); 
     return result.data.results; 
    }); 
    }; 

PHP kodu backend/get/companies.php bir arama dizesi kabul eder ve adları ile id ve name özelliklere sahip nesneler dizisi döndüren o arama dizesini içerir. Ben typeahead alanına bir tek karakterle "f" yazdığınızda, arka uç komut geçirilen companyName değeri "" (boş dize)

: İşte

ben yaşıyorum davranıştır. backend/get/companies.php tüm sonuçları döndürür.

Yazım hatası alanında ikinci bir karakter "fo" yazdığımda, arka plan koduna geçen companyName değeri "f" olur. backend/get/companies.php, "f" ile eşleşen sonuçları döndürür. vb "fo" eşleşen üçüncü bir karakter "foo" döner sonuçları, Yazma

Ben official examples sonra kodumu modellenmislerdir. Ne oluyor? Benim hissim, companyByName() işlevinin bir şekilde, karakter girişe girilmeden önce tetiklenen bir olay tarafından çağrılmasıdır. Düşüncesi olan var mı?

Answer 1

Sorun şu ki, ng modeli görünüm değerlerinin gerisinde kalıyor. companyByName çağrıldığında ng-modeli, giriş alanından en son değere güncellenmez. sindirmek ve dolayısıyla kapsamını yerine sadece oldukça orada değerini onun kullanılarak

scope.companyByName = function(viewValue) { 
    var searchTerms = {name: viewValue, startRow: 0, endRow: 20}; 

    return $http.post("backend/get/companies.php", searchTerms).then((result) => { 
    $log.info("Companies", result.data.results); 
    return result.data.results; 
    }); 
}; 

Answer 2

typeahead sayfadan daha hızlı olması gerekir: companyByName işleve geçirilir argüman kullanmalıdır girişten son değeri almak için.

Here, her iki sürümü de gösteren bir dosyadır. Esasen, aşağıdaki gibi ilk versiyona ihtiyacınız var:

scope.companyByName = function(val) { 
    var companyName = val; 
    var searchTerms = {name: companyName, startRow: 0, endRow: 20}; 

    return $http.post("backend/get/companies.php", searchTerms).then((result) => { 
     $log.info("Companies", result.data.results); 
     return result.data.results; 
    }); 
    };