Kendo Autocomplete 与 Angular 中的服务器过滤，如何？答案

【问题标题】：Kendo Autocomplete with server filtering in Angular, how to?Kendo Autocomplete 与 Angular 中的服务器过滤，如何？
【发布时间】：2015-01-04 04:38:51
【问题描述】：

我按照这个例子描述了在 AngularJS 中使用剑道自动完成的基本工作。

问题是该示例仅适用于本地定义的数据。

有人可以发布如何使用远程 JSON 数据源的示例吗？

链接是： http://demos.telerik.com/kendo-ui/autocomplete/angular

感谢您的建议。

【问题讨论】：

标签： javascript jquery angularjs autocomplete

【解决方案1】：

只需使用 $http，就可以这样：

angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope, $http){

$http.get('/remoteDataSource').
    success(function(data) {
        $scope.countryNames = data;
    });
}

如果数据在您键入时发生变化，您也可以使用 $watch：

angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope, $http){

$scope.$watch('textboxValue', function(){
    $http.get('/remoteDataSource/' + $scope.textboxValue).
        success(function(data) {
            $scope.countryNames = data;
        });
    }
});

【讨论】：

但是 $scope.countryNames 应该在用户输入的每个字符之后刷新。
我不明白为什么上面的代码不是这样。
因为在远程搜索中应用了过滤器，通过输入中的给定字符串值进行搜索。

【解决方案2】：

在 html 中只使用

<input kendo-auto-complete  
        k-data-text-field="'ProductName'"
        k-data-value-field="'ProductID'"
        k-data-source="productsDataSource" />

在Js中使用

angular.module("KendoDemos", [ "kendo.directives" ])
  .controller("MyCtrl", function($scope){
      $scope.productsDataSource = {
        type: "JSON",
        serverFiltering: true,
        transport: {
            read: {
                url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
            }
        }
    };


  })

【讨论】：