angularjs - 如何设置 ion-autocomplete 的值

Question

我正在为我的移动应用程序使用 ion-autocomplete ( https://github.com/guylabs/ion-autocomplete )。我需要在 ion-autocomplete 中设置选定的值，这与 dropdownlist 类似。

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

 <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

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

Controller 代码

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>