angularjs – 如何设置离子自动完成的值

发布时间：2020-12-17 17:15:44 所属栏目：安全来源：网络整理

导读：我正在为我的移动应用程序使用ion-autocomplete( https://github.com/guylabs/ion-autocomplete).我需要在离子自动完成中设置所选值,这类似于下拉列表. 例如：自动完成以显示所有国家/地区,需要设置所选国家/地区.如果用户已经选择了印度国家,当他再次打开进

我正在为我的移动应用程序使用ion-autocomplete( 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来设置值但不成功.

解决方法

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

控制器代码

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

  $scope.countries =[{"id_country":"1","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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!