javascript - Creating rows in Angular when using ng-repeat -
my code repeats posts api , shows 9 posts in row. goal create grid - 3 rows 3 posts in each one. solution tried doesn't work. tried 'clearfix', no success. know how make work?
here's code:
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 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 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>
the problem mixing angular material bootstrap classes. following example uses bootstrap.
the next problem when make grid example if use 6 divisions .col-xs-4 class in single .row element adjust automatically if height of 6 divisions same. otherwise, view messed in example.
to fix issue, have create multiple .row element either can write directive in view or collate list before passing view.
the following example doign in controller (i.e. before passing view):
// helper function collate list array.prototype.collate = function(collatesize) { var collatedlist = []; if (collatesize <= 0) { return []; } angular.foreach(this, function(item, index) { if (index % collatesize === 0) { collatedlist[math.floor(index / collatesize)] = [item]; } else { collatedlist[math.floor(index / collatesize)].push(item); } }); return collatedlist; }; 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.viewby = 9; $scope.totalitems = $scope.posts.length; $scope.currentpage = 1; $scope.itemsperpage = $scope.viewby; $scope.maxsize = 5; $scope.collatedposts = getcollatedposts($scope.posts); }); function getcollatedposts(posts) { if (!posts) { return []; } var paginatedposts = posts.slice((($scope.currentpage - 1) * $scope.itemsperpage), (($scope.currentpage) * $scope.itemsperpage)); return paginatedposts.collate(3); } $scope.setpage = function(pageno) { $scope.currentpage = pageno; }; $scope.setitemsperpage = function(num) { $scope.itemsperpage = num; $scope.currentpage = 1; //reset first page $scope.collatedposts = getcollatedposts($scope.posts); }; $scope.pagechanged = function(currentpage) { $scope.currentpage = currentpage; $scope.collatedposts = getcollatedposts($scope.posts); }; });.row { /* using red border understanding */ border-bottom: 2px solid red; margin-bottom: 10px; margin-top: 10px; }<html> <head> <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 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 class="row" ng-repeat="collatedpostlist in collatedposts"> <div class="col-xs-4" ng-repeat="post in collatedpostlist"> <a href="#post">{{post.title}}</a> <hr> <p>{{post.body}}</p> </div> </div> <ul uib-pagination total-items="totalitems" ng-model="currentpage" class="pagination-sm" items-per-page="itemsperpage" ng-change="pagechanged(currentpage)"></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>
Comments
Post a Comment