In my code, I am facing an issue where posts from the API are being repeated and displayed in rows of 9. My objective is to create a grid layout with 3 rows, each containing 3 posts. Unfortunately, the solution I attempted did not work as expected. I also tried implementing 'clearfix', but that approach was unsuccessful as well. Does anyone have a solution for achieving this grid layout?
Below is the code snippet:
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'allposts.htm',
controller: 'PostsController'
}).when('/post', {
templateUrl: 'post.htm',
controller: 'PostController'
}).when('/addpost', {
templateUrl: 'addpost.htm',
controller: 'AddController'
}).otherwise({
redirectTo: '/'
});
});
myApp.controller('PostsController', function ($scope) {
});
myApp.controller('PostController', function ($scope) {
});
myApp.controller('AddController', function ($scope) {
});
myApp.controller('controller', function ($scope, $http) {
$scope.title = "My app";
$http({
method: 'GET',
url: "http://jsonplaceholder.typicode.com/posts"
}).then(function (response) {
$scope.posts = response.data;
$scope.post = response.data[0];
$scope.viewby = 9;
$scope.totalItems = $scope.posts.length;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.viewby;
$scope.maxSize = 5;
});
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.setItemsPerPage = function (num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
};
$scope.getRowClass = function (index) {
if (index % 3 === 0) {
return "row";
}
};
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.js"></script>
</head>
<body layout="column" ng-app="myApp" ng-cloak ng-controller="controller">
<h1>{{title}}</h1>
<a href="#post">Post</a> |
<a href="#addpost">Add a post</a>
<script type="text/ng-template" id="allposts.htm">
View
<select ng-model="viewby" ng-change="setItemsPerPage(viewby)">
<option>9</option>
<option>18</option>
<option>36</option>
<option>100</option>
</select> posts
<div layout="row">
<div class="col-sm-4" ng-class="getRowClass($index)"
ng-repeat="post in posts.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
<a href="#post">{{post.title}}</a>
<hr>
<p>{{post.body}}</p>
</div>
<div class="clearfix" ng-if="$index % 3 == 0"></div>
</div>
<ul uib-pagination total-items="totalItems" ng-model="currentPage" class="pagination-sm"
items-per-page="itemsPerPage"></ul>
</script>
<script type="text/ng-template" id="post.htm">
</script>
<script type="text/ng-template" id="addpost.htm">
</script>
<div ng-view></div>
</body>
</html>