我正在制作一个Angular App,我开始使用一些Kendo UI控件.我在连接AutoComplete控件时遇到了一些问题.我想使用一个工厂,它将从我的数据库中返回“自动完成”值列表.
我已经包含了自动完成控件,我正在尝试使用k-options属性：
<input kendo-auto-complete ng-model="myFruit" k-options="FruitAutoComplete" />
在我的控制器中,下面的硬编码水果列表工作：
$scope.FruitAutoComplete = {
dataTextField: 'Name',dataSource:[
{ id: 1,Name: "Apples" },{ id: 2,Name: "Oranges" }
]
}
当我把它移到我的工厂时,我看到它调用并从工厂返回数据,但它从未绑定到屏幕上.
$scope.FruitAutoComplete = {
dataTextField: 'Name',dataSource: new kendo.data.DataSource({
transport: {
read: function () {
return FruitFactory.getYummyFruit($scope.myFruit);
}
}
})
}
我最终得到了永远不会满足自动完成的请求.
我的工厂正在退回一系列水果[
我的水果工厂代码：
getYummyFruit: function (val) {
return $http.get('api/getFruitList/' + val)
.then(function (res) {
var fruits= [];
angular.forEach(res.data,function (item) {
fruits.push(item);
});
return fruits;
});
}
这是你的解决方案
原文链接：https://www.f2er.com/angularjs/240441.htmlhttp://plnkr.co/edit/iOq2ikabdSgiTM3sqLxu?p=preview
为了plnker我没有添加$http(更新 – 这里是http://plnkr.co/edit/unfgG5?p=preview与$http)
更新2 – http://plnkr.co/edit/01Udw0sEWADY5Qz3BnPp?p=preview根据@SpencerReport修复了问题
控制器
$scope.FruitAutoCompleteFromFactory = {
dataTextField: 'Name',dataSource: new kendo.data.DataSource({
transport: {
read: function (options) {
return FruitFactory.getYummyFruit(options)
}
}
})
}
工厂 –
factory('FruitFactory',['$http',function($http) {
return {
getYummyFruit: function(options) {
return $http.get('myFruits.json').success(
function(results) {
options.success(results);
});
}
}
}
