I realized about angularjs at the moment and I’m making an attempt to create a web page for my search outcomes in order that I can be capable to create side filters. At present I’ve a web page template with the next code —
<?php
/* Template Title:Search Outcomes */ ?>
<!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>
<physique>
<div id="web 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(); ?>
</physique>
</html>
As of now Im working into an issue the place it’s only exhibiting me 5 posts when there’s 10 in whole. That is my script –
angular.module('app', ['ngRoute', 'ngSanitize'])
.config(operate($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/search-results', {
templateUrl: myLocalized.partials + 'essential.html',
controller: 'Important'
})
.when('/:ID', {
templateUrl: myLocalized.partials + 'content material.html',
controller: 'Content material'
});
})
.controller('Important', operate($scope, $http, $routeParams) {
$http.get('wp-json/posts?sort=property').success(operate(res){
$scope.posts = res;
});
})
.controller('Content material', operate($scope, $http, $routeParams) {
$http.get('wp-json/posts?sort=property?filter["posts_per_page"]=25&filter["orderby"]=date&filter["order"]=desc/' + $routeParams.ID).success(operate(res){
$scope.put up = res;
});
});
That is my partial –
<ul>
<li ng-repeat="put up in posts">
<a href="{{put up.ID}}">
{{put up.title}}
</a>
</li>
</ul>
<ul>
<li ng-repeat="put up in information.posts">
<a href="weblog/{{put up.id}}" ng-bind-html="put up.title.rendered"></a>
<a href="weblog/{{put up.id}}" ng-if="put up.featured_image_thumbnail_url"><img ng-src="{{put up.featured_image_thumbnail_url}}" alt="{{put up.featured_image.title.rendered}}" /></a>
<div ng-bind-html="put up.excerpt.rendered"></div>
</li>
</ul>
What am I doing flawed thats making it solely present half the posts?