angularjs не отображает все посты

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Дополнительные рекомендации

Вопрос или проблема

Сегодня я узнал об AngularJS и пытаюсь создать страницу для своих результатов поиска, чтобы иметь возможность создавать фасетные фильтры. В настоящее время у меня есть шаблон страницы со следующим кодом —

<?php
/* Название шаблона: Результаты поиска */ ?>
    <!DOCTYPE html>
<html>
<head>
    <base href="https://wordpress.stackexchange.com/questions/216785/<?php $url_info = parse_url( home_url() ); echo trailingslashit( $url_info["path'] ); ?>">
        <title>Поиск</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.3.0.min.js"></script>
    <?php wp_head(); ?>
</head>
<body>
    <div id="page" ng-app="app">
        <header>
            <h1>
                <a href="<?php echo home_url(); ?>">Поиск</a>
            </h1>
        </header>

        <div ng-view></div>

        <footer>
            &copy; <?php echo date( 'Y' ); ?>
        </footer>
    </div>

    <?php wp_footer(); ?>
</body>
</html>

На данный момент я сталкиваюсь с проблемой, когда показываются только 5 записей, хотя всего их 10. Это мой скрипт –

angular.module('app', ['ngRoute', 'ngSanitize'])
.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/search-results', {
        templateUrl: myLocalized.partials + 'main.html',
        controller: 'Main'
    })
    .when('/:ID', {
        templateUrl: myLocalized.partials + 'content.html',
        controller: 'Content'
    });
})
.controller('Main', function($scope, $http, $routeParams) {
    $http.get('wp-json/posts?type=property').success(function(res){
        $scope.posts = res;
    });
})
.controller('Content', function($scope, $http, $routeParams) {
    $http.get('wp-json/posts?type=property?filter["posts_per_page"]=25&filter["orderby"]=date&filter["order"]=desc/' + $routeParams.ID).success(function(res){
        $scope.post = res;
    });
});

Это мой шаблон –

<ul>
    <li ng-repeat="post in posts">
        <a href="https://wordpress.stackexchange.com/questions/216785/{{post.ID}}">
            {{post.title}}
        </a>
    </li>
</ul>
<ul>
    <li ng-repeat="post in data.posts">
        <a href="blog/{{post.id}}" ng-bind-html="post.title.rendered"></a>
        <a href="blog/{{post.id}}" ng-if="post.featured_image_thumbnail_url"><img ng-src="{{post.featured_image_thumbnail_url}}" alt="{{post.featured_image.title.rendered}}" /></a>
        <div ng-bind-html="post.excerpt.rendered"></div>
    </li>
</ul>

Что я делаю не так, что это показывает только половину записей?

измените это :

.controller('Content', function($scope, $http, $routeParams) {
    $http.get('wp-json/posts?type=property?filter["posts_per_page"]=25&filter["orderby"]=date&filter["order"]=desc/' + $routeParams.ID).success(function(res){
        $scope.post = res;

на это:

.controller('Content', function($scope, $http, $routeParams) {
    $http.get('wp-json/posts?type=property?filter["posts_per_page"]=25&filter["orderby"]=date&filter["order"]=desc/' + $routeParams.ID).success(function(res){
        $scope.posts = res;

Ответ или решение

Ваш вопрос касается проблемы с отображением постов на вашей странице с результатами поиска, разработанной с использованием AngularJS. По вашим описаниям, вы сталкиваетесь с ситуацией, когда отображается всего 5 постов, хотя их всего 10. Давайте разберемся, что может быть не так и как это исправить.

Проблема

Ваша текущая структура кода, указанная в контроллере Content, вызывает ошибку в формировании запроса к API. Вы используете неверный синтаксис для формирования URL запроса к вашему WordPress REST API, что может привести к тому, что API не возвращает ожидаемое количество постов. Обратим внимание на вашу строку запроса:

$http.get('wp-json/posts?type=property?filter["posts_per_page"]=25&amp;filter["orderby"]=date&amp;filter["order"]=desc/' + $routeParams.ID)

Здесь вы используете два вопросительных знака (?), что неправильно. После первого вопросительного знака начинается строка параметров запроса, и в этом случае необходимо использовать символ & для разделения различных параметров.

Решение

Вам следует исправить строку запроса в контроллере Content, как показано ниже:

.controller('Content', function($scope, $http, $routeParams) {
    $http.get('wp-json/posts?type=property&filter[posts_per_page]=25&filter[orderby]=date&filter[order]=desc/' + $routeParams.ID)
    .success(function(res){
        $scope.posts = res;
    });
});

Обратите внимание на изменение: теперь мы используем & вместо второго ?. Это позволит API правильно интерпретировать запрос и, как следствие, вернуть все посты.

Дополнительные рекомендации

Проверка кода: Убедитесь, что ваше API действительно выставляет все посты. Проверьте, возвращает ли ваш GET запрос полные данные, например, используя Postman или браузер для прямого доступа к wp-json/posts?type=property&filter[posts_per_page]=25.
Логика отображения: Убедитесь, что в вашем HTML-шаблоне вы правильно привязали данные к элементам. Правильный способ отображения постов с использованием ng-repeat был представлен вами, но стоит проверить его еще раз на наличие возможных ошибок.
Pagination (Пагинация): Если ваши данные по умолчанию имеют ограничение на количество постов, возможно, вам потребуется настроить пагинацию (если эта функциональность необходима).
Сторонние библиотеки: Убедитесь, что AngularJS и ваши библиотеки (например, jQuery) подключены правильно и загружаются перед использованием.

Следуя данным рекомендациям, вы должны быть в состоянии исправить проблему с отображением постов на странице и обеспечить, чтобы все ожидаемые данные возвращались и правильно отображались. Если у вас продолжают возникать трудности, рассмотрите возможность отладки вашего API-запроса или проверьте серверные настройки.