1

I learned about angularjs today and I am trying to create a page for my search results so that I can be able to create facet filters. Currently I have a page template with the following code --

<?php
/* Template Name:Search Results */ ?>
    <!DOCTYPE html>
<html>
<head>
    <base href="<?php $url_info = parse_url( home_url() ); echo trailingslashit( $url_info['path'] ); ?>">
        <title>Search</title>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//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(); ?>">Search</a>
            </h1>
        </header>

        <div ng-view></div>

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

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

As of now Im running into a problem where it is only showing me 5 posts when there is 10 in total. This is my script -

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

This is my partial -

<ul>
    <li ng-repeat="post in posts">
        <a href="{{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>

What am I doing wrong thats making it only show half the posts?

1 Answer 1

0

change this :

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

to this:

.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;
3
  • I dont see the difference ?
    – 730wavy
    Commented Feb 18, 2016 at 14:27
  • you missed S @ $scope.post=res; Commented Feb 21, 2016 at 7:29
  • thanks but it still doesnt show all the posts.
    – 730wavy
    Commented Apr 9, 2016 at 2:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.