2014-11-07 3 views
0

Я последовал этому примеру, который описывает основные работы с автозаполнением Kendo в AngularJS.Kendo Autocomplete с фильтрацией сервера в Angular, как?

Проблема в том, что пример работает только с локальными определенными данными.

Может ли кто-нибудь опубликовать пример работы с удаленным источником данных JSON?

Линк: http://demos.telerik.com/kendo-ui/autocomplete/angular

Спасибо за любые советы.

ответ

2

Просто используйте $ HTTP, так что-то вроде этого:

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

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

Если данные меняется по мере ввода, вы можете использовать $ часы также:

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

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

Но $ scope.countryNames следует обновлять после каждого символа, который вводит пользователь. – redrom

+0

Не могу понять, почему это не так с вышеуказанным кодом. – JMK

+0

Из-за примененного фильтра в удаленном поиске по заданному строковому значению со входа. – redrom

0

в 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", 
      } 
     } 
    }; 


    })