Bootstrap typeahead與ng-model不兼容

Question

我有一個文本框來指定國籍。我正在使用Bootstrap typeahead。

<input type="text" class="form-control" ng-model="nationality" placeholder="Enter Country" data-provide="typeahead" data-items="5" autocomplete="off" data-source='["Afghanistan","Australia","Bangladesh", 
"Brazil","Britan","Canada","China","Denmark","Egypt","France", 
"Germany","India","Indonesia","Iran","Iraq", 
"Isrel","Italy","Japan","Nepal","Pakistan","Sri Lanka", 
"United States","New Zealand","South Africa","Russia","South Korea","Sapin","Chilie","Sweeden"]'> 

我發佈ng模型數據到控制器像任何其他文本框數據。 Pop up即將選擇國家，但國名不與ng-model綁定。我鍵入的字符是鍵盤。

例如- 如果輸入In，我可以選擇印度，但只有In與ng-model綁定。

Answer 1

嘗試這樣

<input type="text" class="form-control" ng-model="nationality" placeholder="Enter Country" id="country" data-provide="typeahead" data-items="5" autocomplete="off"> 

和JS部分

<script> 

    var data = ["Afghanistan","Australia","Bangladesh", 
    "Brazil","Britan","Canada","China","Denmark","Egypt","France", 
    "Germany","India","Indonesia","Iran","Iraq", 
    "Isrel","Italy","Japan","Nepal","Pakistan","Sri Lanka", 
    "United States","New Zealand","South Africa","Russia","South Korea","Sapin","Chilie","Sweeden"]; 
    $('#country').typeahead({source: data}) 

</script> 

預輸入工作example。