2017-04-12 41 views
1

我需要在我的離子項目中具有自動填充字段。我已經發現的離子自動完成插件&和我有 嘗試下面的代碼,離子自動完成

插件:

bower install ionic-autocomplete 

HTML:

<input type="text" ng-model="search" ionic-autocomplet="{item:countries, onSelect: ToGetData}" />

控制器:

.controller('MyCtrl', function($scope){ 
    $scope.countries = [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Antigua and Barbuda', code: 'AG'}, 
    {name: 'Bahamas', code: 'BS'}, 
    {name: 'Cambodia', code: 'KH'}, 
    {name: 'Cape Verde', code: 'CV'} 
    ]; 
    $scope.ToGetData = function(item) { 
    alert('The selected item is: '+item); 
    } 
}); 

但是,它不工作...

我曾嘗試用以下鏈接還可以,但沒有工作,

https://github.com/guylabs/ion-autocomplete#installation

How to implement Autocomplete TextBox using AngularJS?

誰能告訴我,如何使用離子實現自動完成?

任何幫助將被讚賞!

+0

任何錯誤? –

+0

函數「ToGetData」本身沒有調用 –

回答

0

改正的代碼將如下所示: -

HTML: -

<input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" items-method="ToGetData(query)" item-view-value-key="name" /> 

JS: -

.controller('MyCtrl', function($scope){ 
     $scope.countries = [ 
     {name: 'Afghanistan', code: 'AF'}, 
     {name: 'Antigua and Barbuda', code: 'AG'}, 
     {name: 'Bahamas', code: 'BS'}, 
     {name: 'Cambodia', code: 'KH'}, 
     {name: 'Cape Verde', code: 'CV'} 
     ]; 

// Called everytime the user types something in the search box with the query passed as an argument 
     $scope.ToGetData = function(query) { 
      if(query) { 
      // Filter data based on the query passed 
      return item; 
      } 
      else { 
      return $scope.countries; // Display all of the data initially 
      } 
     } 
    }); 

希望幫助! 讓我知道,如果它仍然不起作用。