Question

我正在为我的移动应用程序使用离子自动完成功能（https://github.com/guylabs/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

要预先填充离子自动完成窗口小部件中的选定项目，您必须将属性ExternalModel设置为所需的初始值，并且必须实现一个特殊的方法模型到项目方法，该方法获取所选值作为输入并从数据数组中检索整个对象。下面是一个工作代码示例。更多信息here

控制器代码

var $e = $elem.siblings().filter(function() {
    return $(this).text() == 'text';
});

HTML

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

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

1 个答案: