我正在为我的移动应用程序使用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>
