剑道UI角JS和自动完成与服务 [英] Kendo UI Angular JS and AutoComplete with a service

问题描述

我作出角App和我开始使用一些剑道UI控件。我有一些问题，但是把自动完成控制。我想用一个工厂会从我的数据库返回的自动完成值的列表。

我已经iincluded自动完成控制，我尝试使用K-选项属性：

 ＆LT;输入剑道，自动完成NG模型=myFruitK-选项=FruitAutoComplete/＆GT;
 

在我的控制器以下硬盘codeD水果的清单工作：

  $ scope.FruitAutoComplete = {
            dataTextField：名称，
            数据源：[
                {ID：1，产品名称：苹果}，
                {ID：2，产品名称：橙子}
            ]
}
 

当我提出这个交给使用我厂我看到它调用和从工厂返回的数据，但它从来没有坐上开往到屏幕上。

  $ scope.FruitAutoComplete = {
            dataTextField：名称，
            数据源：新kendo.data.DataSource（{
                运输： {
                    阅读：功能（）{
                        返回FruitFactory.getYummyFruit（$ scope.myFruit）;
                    }
                }
            }）
        }
 

我结束了从来没有得到履行，以自动完成该请求。

我厂是刚回来的水果[数组
我果品厂code：

  getYummyFruit：功能（VAL）{
                    返回$ http.get（API / getFruitList /+ VAL）
                        。然后（功能（RES）{
                            变种水果= [];
                            angular.forEach（res.data，函数（项目）{
                                fruits.push（项目）;
                            }）;
                            返回水果;
                        }）;
                }
 

解决方案

下面是您的解决方案

http://plnkr.co/edit/iOq2ikabdSgiTM3sqLxu?p=$p$ PVIEW

有关plnker的缘故，我没加$ HTTP（更新 - 这里是 HTTP ：？//plnkr.co/edit/unfgG5 p = preVIEW 以$ HTTP）
更新2 - http://plnkr.co/edit/01Udw0sEWADY5Qz3BnPp?p=$p$ PVIEW 的固定问题，因为每@SpencerReport

控制器

  $ scope.FruitAutoCompleteFromFactory = {
            dataTextField：名称，
            数据源：新kendo.data.DataSource（{
                运输： {
                    阅读：功能（选件）{
                        返回FruitFactory.getYummyFruit（选项）                    }
                }
            }）
        }
 

工厂 -

 厂（'FruitFactory'，['$ HTTP，
  功能（$ HTTP）{
    返回{
      getYummyFruit：功能（选件）{
        返回$ http.get（'myFruits.json'）。成功（
          功能（结果）{
            options.success（结果）;
          }）;      }
    }
  }
 

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.

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;
                        });
                }

解决方案

Here is your solution

http://plnkr.co/edit/iOq2ikabdSgiTM3sqLxu?p=preview

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

The controller

$scope.FruitAutoCompleteFromFactory = {
            dataTextField: 'Name',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                        return  FruitFactory.getYummyFruit(options)

                    }
                }
            })
        }

The factory -

factory('FruitFactory', ['$http',
  function($http) {
    return {
      getYummyFruit: function(options) {
        return $http.get('myFruits.json').success(
          function(results) {
            options.success(results);
          });

      }
    }
  }

这篇关于剑道UI角JS和自动完成与服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！