带有服务的 Kendo UI Angular JS 和 AutoComplete [英] Kendo UI Angular JS and AutoComplete with a service

问题描述

我正在制作一个 Angular 应用程序，并且我开始使用一些 Kendo UI 控件.我在连接 AutoComplete 控件时遇到了一些问题.我想使用一个工厂来从我的数据库中返回自动完成"值的列表.

I'm making an Angular App and I'm starting to use some of the Kendo UI controls. I'm having some issues wiring up the AutoComplete control. I would like to use a factory that will return the list of "auto complete" values from my database.

我已经包含了自动完成控件并且我正在尝试使用 k-options 属性:

I have iincluded the auto complete control and I'm trying to use the k-options attribute:

<input kendo-auto-complete ng-model="myFruit" k-options="FruitAutoComplete"  />

在我的控制器中，以下硬编码的水果列表有效:

In my controller the following hard coded list of fruits work:

 $scope.FruitAutoComplete = {
            dataTextField: 'Name',
            dataSource:[
                { id: 1, Name: "Apples" },
                { id: 2, Name: "Oranges" }
            ]
}

当我移动它以使用我的工厂时，我看到它从工厂调用并返回数据，但它永远不会绑定到屏幕上.

When I move this over to use my factory I see it calling and returning the data from the factory but it never get bound to the screen.

 $scope.FruitAutoComplete = {
            dataTextField: 'Name',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function () {
                        return    FruitFactory.getYummyFruit($scope.myFruit);
                    }
                }
            })
        }

我最终的请求从未被满足到自动完成.

I end up with the request never being fulfilled to the auto complete.

我的工厂正在返回一系列水果 [我的水果工厂代码:

My factory is just returning an array of fruit [ my Fruit Factory Code:

     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 修复问题

For the sake of plnker I did not add $http (UPDATE - here is http://plnkr.co/edit/unfgG5?p=preview with $http) UPDATE 2 - http://plnkr.co/edit/01Udw0sEWADY5Qz3BnPp?p=preview fixed problem as per @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);
          });

      }
    }
  }

这篇关于带有服务的 Kendo UI Angular JS 和 AutoComplete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！