Kendo UI Angular JS 和带有服务的 AutoComplete

Posted 2023-05-07

【中文标题】Kendo UI Angular JS 和带有服务的 AutoComplete

【英文标题】：Kendo UI Angular JS and AutoComplete with a service

【发布时间】：2014-10-05 19:03:03

【问题描述】：

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

我已经包含了自动完成控件，我正在尝试使用 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;
                        );
                

【问题讨论】：

你能显示 FruitFactory 代码吗？有什么错误吗？

我刚刚更新了原帖水果工厂没有错误它返回一个水果数组。

$http.get 实际上返回的是 $promise 而不是数据。

我也注意到你的阅读我认为应该阅读数据：

剑道 API 文档：docs.telerik.com/kendo-ui/api/web/autocomplete

【参考方案1】：

这是你的解决方案

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

      
    
  

【讨论】：

非常感谢您的帮助。我没有意识到我需要“填充” options.success 对象。这是一个很好的例子，说明了如何让剑道自动完成以角度工作。再次感谢！

谢谢您-希望它也对其他人有所帮助。我将突出显示 options.success。

感谢这个例子。但是我不明白您为什么要将 myFruits 数组传递给 getYummyFruit 函数。你能解释一下这里的目的是什么吗？