AngularJS и serveride фильтр и разбиение на страницы

Question

Я ищу использовать Angular JS с WebAPI - будет возвращать большое количество результатов из WebAPI и поэтому хочу использовать какую-либо разбивку на страницы на стороне сервера и фильтрацию.

Большинство учебных пособий, которые я видел, предназначены для фильтрации на стороне клиента, которая не является тем, что я ищу.

Не используется AngularJS раньше, поэтому вы ищете простой пример, который может показать, как использовать это - эффективно у меня есть список продуктов и вы хотите иметь возможность, например, фильтровать по цене. Поскольку это большой набор данных, я бы хотел использовать также разбиение на страницы.

На данный момент, на мой контроллер у меня есть:

app.controller("MyController", function ($scope, $http){ 


    $http.get('/api/ProductResults'). 
     success(function (data, status, headers, config) { 
     $scope.results = data.results; 

     }). 
      error(function (data, status, headers, config) { 
     // log error 

     }); 

который будет возвращать список продуктов, и я буду использовать для вывода списка.

WebAPI будет принимать параметры для номера страницы и фильтров и т. Д., Но я не уверен, как реализовать это в коде.

$http.get('/api/Products?page=1&minPrice=10') 

Ожидаю, что я получу текущий номер страницы и минимальную цену по параметрам URL?

Answer 1

Для номера страницы и minPrice у вас могут быть переменные области видимости, которые содержат эту информацию для вас. Допустим, у вас есть сетка данных на странице, которая включает в себя навигацию для нескольких страниц данных, которые у вас есть. В этом случае у меня будет переменная $ scope.pageNumber, привязанная к этому элементу навигации сетки данных. Щелчок на следующем или предыдущем изменяет значение $ scope.pageNumber и на вас $ http вы будете использовать этот $ scope.pageNumber при построении URL-адреса вашего запроса. То же самое касается minPrice.

Вы можете добавить свои параметры на ваш запрос, как это:

$http({ 
    url: "/api/Products", 
    method: "GET", 
    params: {page : 1, minPrice : 10} 
});