How to set a value for an autofill ion

Question

I am using ion-autocomplete ( https://github.com/guylabs/ion-autocomplete ) for my mobile application. I need to set the selected value to ion-autocomplete, which is similar to the drop down list.

For example: Autocomplete to display all countries, you must set the selected country. If the user has already selected the country of India, when he again opens for editing, he should show India, as well as show other values.

 <input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" 
                placeholder="Enter the country to search" 
                items-method="getCountries(query)" 
                items-clicked-method="loadStates(callback)"
                item-view-value-key="name" 
                item-value-key="id_country"  
                items-method-value-key="items"  
                max-selected-items="1"  
                autocomplete="off" 
                ng-model="registration.id_country"/>

  $scope.countries =[{"id_country":"1","sortname":"AF","name":"Afghanistan"},
                    {"id_country":"2","sortname":"AL","name":"Albania"},
                    {"id_country":"3","sortname":"DZ","name":"Algeria"},
                    {"id_country":"4","sortname":"AS","name":"American Samoa"},
                    {"id_country":"5","sortname":"IN","name":"India"}]; 

    $scope.getCountries = function(query) {

        var returnValue = { items: [],selectedItems:[] };
        $scope.countries.forEach(function(item){

            if (item.name.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
            else if (item.id_country.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
        });

      return returnValue;
    }

In ng-model registration.id_country, I pass the country identifier. I tried setting the value in the same way, going over to the ng model, but failed.

Answer 1

, ExternalModel , , model-to-item-method, . .

app.controller('ExampleCtrl', function($scope) {

  $scope.countries =[{"id_country":"1","sortname":"AF","name":"Afghanistan"},
                    {"id_country":"2","sortname":"AL","name":"Albania"},
                    {"id_country":"3","sortname":"DZ","name":"Algeria"},
                    {"id_country":"4","sortname":"AS","name":"American Samoa"},
                    {"id_country":"5","sortname":"IN","name":"India"}];


    $scope.initialCountry = ["2"];

    $scope.getCountries = function(query, isInitializing) {
        var returnValue = { items: [],selectedItems:[] };
        $scope.countries.forEach(function(item){
            if (item.name.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
            else if (item.id_country.indexOf(query) > -1 ){
                returnValue.items.push(item);
            }
        });

      return returnValue;
    };

    $scope.modelToItemMethod = function (modelValue) {

    for(var i = 0; i < $scope.countries.length; i++){
      if($scope.countries[i].id_country == modelValue){
        return $scope.countries[i];
      }
    }
    return {};
  };
});

HTML

  <ion-content ng-controller="ExampleCtrl">
    <input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete"
            placeholder="Enter the country to search"
            items-method="getCountries(query)"
            items-clicked-method="clickedMethod(callback)"
            item-view-value-key="name"
            item-value-key="id_country"
            items-method-value-key="items"
            max-selected-items="1"
            autocomplete="off"
            ng-model="currentCountry"
            external-model="initialCountry"
            model-to-item-method="modelToItemMethod(modelValue)"
            />
          </ion-content>