angularjs – 带有服务的Kendo UI Angular JS和AutoComplete

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

导读：我正在制作一个Angular App,我开始使用一些Kendo UI控件.我在连接AutoComplete控件时遇到了一些问题.我想使用一个工厂,它将从我的数据库中返回“自动完成”值列表. 我已经包含了自动完成控件,我正在尝试使用k-options属性： input kendo-auto-complete ng-mo

我正在制作一个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;
                        });
                }

这是你的解决方案

http://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);
          });

      }
    }
  }

（编辑：李大同）

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