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>
© <?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?
