如何将值设置为离子自动完成

Question

我正在为我的移动应用程序使用 ion-autocomplete (https://github.com/guylabs/ion-autocomplete)。我需要在 ion-autocomplete 中设置选中的值，类似于下拉列表。

例如：自动完成显示所有国家，需要设置选择的国家。如果用户已经选择了印度国家，当他再次打开进行编辑时，它应该会显示已选择的印度，并且还会显示其他值。

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

在 ng-model registration.id_country 中，我传递了国家 ID。我尝试过类似地通过传递给 ng-model 来设置值，但没有成功。

Answer 1

要在 ion 自动完成小部件中预先填充所选项目，您必须将属性 ExternalModel 设置为您想要的初始值，并且您必须实现一个特殊方法 model-to-item-method 来获取所选值作为输入并从您的数据数组中检索整个对象。下面是一个工作代码示例。更多信息here

控制器代码

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>