I am trying to paginate a table which has 500 entries, with 10 entries per page.
To implement this I came across a GitHub page.
But it did not work. I would like to know what I am missing here.
Also my code ,
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title> Pagination example </title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<body ng-controller="PageDetails as pg">
<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >
<thead>
<tr>
<th>POST_ID</th>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>BODY</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="comments in pg.comment">
<td>{{comments.postId}}</td>
<td>{{comments.id}}</td>
<td>{{comments.name}}</td>
<td>{{comments.email}}</td>
<td>{{comments.body}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls></dir-pagination-controls>
</body>
</html>
script.js
(function() {
angular.module('plunker', []);
angular.module('plunker').controller('PageDetails', PageFn);
function PageFn($http) {
var pg = this;
pg.comment = [];
details();
function details() {
$http({
method: 'GET',
url: 'http://jsonplaceholder.typicode.com/comments'
}).success(function(data, status) {
console.log(data);
pg.comment = data;
}).error(function(data, status) {
console.log(data);
});
}
pg.add = function() {
pg.newComment.id = pg.comment[pg.comment.length - 1].id + 1;
pg.comment.push(pg.newComment);
pg.newComment = null;
};
}
})();
Firstly download the dirPagination.js from here.
Include the dirPagination.js file on your page like :
<script src="~/Content/dirPagination.js"></script>
After that add dir-paginate directive for pagination in script
file.code given below :
angular.module('plunker', ['angularUtils.directives.dirPagination']);
Then in tr tag add given line of code :
<tr dir-paginate="comments in
pg.comment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
Then add pagination control in your HTML page for putting buttons of First,Next,Previous and Last.Code given below :
<dir-pagination-controls
max-size="10"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
If you study the demo on the page of angularUtils, you can see that they use:
1) include file with the library in html:
<script src="dirPagination.js"></script>
2) angular utility library is included as a dependancy in the application, see in script.js
var myApp = angular.module('myApp', ['angularUtils.directivses.dirPagination']);
So you need to add those 2 things in your app file to make pagination to work.
change
<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >
to
<table>
then change
<tr ng-repeat="comments in pg.comment">
to
<tr dir-paginate="comments in pg.comment | itemsPerPage: 10" >
Related
I'm trying to make a simple Premier League table using a free football data api. When I console log vm.table, I get all the data I should have for the table to work. Does that mean there is a fault in the html file? I'm a total novice with angular and I'm trying to learn it by making this little app. Can someone point me to where my problem is? The console shows no errors or anything, but it simply doesn't print the data into the table as expected.
this is the html file:
<html ng-app="eplApp" lang="en">
<head>
<meta charset="UTF-8">
<title>EPL Feeder</title>
<!-- styles -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
<!-- scripts -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller='tableCtrl as table'>
<table>
<thead>
<tr><th colspan="4">English Premier League Table</th></tr>
<tr>
<td>Pos</td>
<td>Team</td>
<td>Played</td>
<td>Win</td>
<td>Draw</td>
<td>Loss</td>
<td>GF</td>
<td>GA</td>
<td>GD</td>
<td>Points</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='team in vm.table' ng-class="{top:team.position === 1, cl: (team.position > 1) && (team.position < 5), el:team.position === 5, rel: (team.position > 17)}">
<td>{{team.position}}</td>
<td class="flexbox" ng-click="teamView()">
<img ng-src="{{team.crestURI}}" alt="{{team.teamName}} crest" />
<p class="teamName">{{team.teamName}}</p>
</td>
<td><p>{{team.playedGames}}</p></td>
<td>{{team.wins}}</td>
<td>{{team.draws}}</td>
<td>{{team.losses}}</td>
<td>{{team.goals}}</td>
<td>{{team.goalsAgainst}}</td>
<td>{{team.goalDifference}}</td>
<td>{{team.points}}</td>
</tr>
</tbody>
</table>
This is the script file:
var app = angular.module('eplApp', []);
app.controller('tableCtrl', function($http) {
var vm = this;
vm.table = [];
$http({
headers: { 'X-Auth-Token': '971acba677654cdb919a7ccebd5621e2' },
method: "GET",
url: "http://api.football-data.org/v1/soccerseasons/426/leagueTable"
}).then(function(response) {
vm.table = response.data.standing;
console.log(vm.table);
});
});
You should change,
From
<body ng-controller='tableCtrl as table'>
To
<body ng-controller='tableCtrl as vm'>
it should be similar to this because you use controllerAs syntax in your app.
<tr ng-repeat='team in table.standing' ...
Edit
after editing your question you should use #Sajeetharan answer.
I am creating an application related to cricket match information in angular. Am getting problem in fetching api response. you can check api response here.
Console is showing error, please check
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="cricApp" ng-controller="cricCtrl">
<div class="form-group">
<h2>Your result</h2>
<table class="table table-striped">
<thead>
<tr><th colspan="4"><h4>Cricket Match Info</h4></th></tr>
<tr>
<th>Sno</th>
<th>unique_id</th>
<th>description</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matchList | filter: nameFilter">
<td>{{$index + 1}}</td>
<td>
{{match.unique_id}}
</td>
<td>{{match.description}}</td>
<td>{{match.title}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('cricApp', []).
controller('cricCtrl', function($scope, $http) {
$scope.matchList = [];
$http.get("http://cricapi.com/api/cricket").then(function (response) {
console.log(response);
$scope.matchList = response.data;
});
}
);
</script>
</body>
</html>
your code is fine just replace
$scope.matchList = response.data;
with
$scope.matchList = response.data.data;
because actual data is coming in data inside response.data.
index.html:
<!doctype html>
<html ng-app="customersApp">
<head>
<title>Angular js Hello World</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body ng-init="">
<h2>Customers</h2>
Filter: <input type="text" ng-model="customerFilter.name">
<br><br>{{name}}
<span class="pre-search">Your Search:</span> <span class="search-term">{{customerFilter.name}}</span>
<br><br>
<table>
<tr>
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">Order Total</th>
<th ng-click="doSort('joined')">Joined</th>
</tr>
<tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reversed">
<td>{{cust.name | lowercase}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date}}</td>
</tr>
</table>
<span>Total Customers : {{customers.length}}</span>
<script type="text/javascript" src="assets/js/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
and my app/app.js:
(function () {
angular.module('customersApp', []);
}());
and also my app/controllers/CustomersController.js:
(function () {
angular.module('customersApp')
.controller('CustomersController', function ($scope) {
$scope.sortBy = 'name';
$scope.reversed = false;
$scope.name = "Ramachandra";
$scope.customers = [{joined:'1984-06-29', name:'Virat Kohli', city:'banglore', orderTotal:'90.9468'}, {joined:'1920-03-19', name:'Yuvraj Singh', city:'vijayawada', orderTotal:'300.454'}, {joined:'1980-08-03', name:'MS Dhoni', city:'katamnallur', orderTotal:'35.78'}, {joined:'2010-01-23', name:'Michael Jordan', city:'Hoskote', orderTotal:'45.10'}];
$scope.doSort = function (propName) {
$scope.sortBy = propName;
$scope.reversed =! $scope.reversed;
};
});
}());
Now when i just put in my controller script src in html and call that controller alone, it goes just fine, when i just put around a few lines to make it a part of module, it goes off, thanks for answering.
Do you miss the controller import?
<script type="text/javascript" src="app/controllers/CustomersController.js"></script>
right after the app.js import
Really sorry to even say this guys after a lot of play around i found one of my file being named wrong in the src attribute, Sincere thankyou to Mickael R and pankaj parkar for being with me, really sorry,
If any one else is looking for answers and viewing this try looking for all the files being named and referenced right in the html file
I want tableRow.html to be drawn under the table head but the ng-repeat is not drawing at all and the examples are above the table head. If I drop the row with examples directly into the proper location in index.html it will draw just fine. What am I doing wrong?
index.html
<html>
<head>
<title>Currency Exchange</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>A title to the table</h1>
<div>
<div class= "ExTableDiv">
<table class= "ExTable">
<thead>
<tr>
<th class="column">Currency Code</th>
<th class="column">Currency Name</th>
<th class="column">Exchange Rate vs USD</th>
</tr>
</thead>
<tbody ng-controller="TestController"><!--**if you try TestController as TC it will throw an error, why?**-->
<test-directive></test-directive>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/directives/tableFiller.js"></script>
</html>
app.js
(function(){
var app = angular.module('myApp',['exchange-directives']);
app.controller('TestController', ['$http', function($http) {
var table = this;
table.rows = [];
$http.get('/item.json').success(function(data){
table.rows = [{"name":"Captain","rate":"0.8910","inverce":"1.1223"}]; //I added this here so I know I am getting json data
});
}]);
})();
tableFiller.js
(function(){
var app = angular.module('exchange-directives', []);
app.directive('testDirective', function(){
return {
restrict: 'E',
templateUrl: 'js/directives/tableRow.html'
};
});
})();
tableRow.html
<tr ng-repeat='row in TestController.table.rows'>
<td>{{row.name}}</td>
<td>{{row.rate}}</td>
<td>{{row.inverse}}</td>
</tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
</tr>
Replace <tr ng-repeat='row in TestController.table.rows'> with
<tr ng-repeat='row in TestController.rows'>
In your controller you're setting table = this, so table.rows actually is this.rows and thus available to the markup via TestController.rows
I am choosing to answer this question:
Also the tutorial I followed on codeschool wraps angular.module within a function but I see that most other examples don't. What is the difference? Why choose one over the other?
This is called an immediately invoked function expression or (IIFE). It is a light-weight way to introduce modules into JavaScript. The goal of using something like this is to ensure lexical scoping of all variables declared at the top level of the module. Without something like this, it is easy to accidentally introduce global variables, which in general is a baaaaad thing.
The header 'Speedruns' keeps getting repeated. How can I fix this?
Also, if there is a better way to do this please let me know.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script>
var app = angular.module('player2', []);
app.controller('MainController', function($scope, $http) {
$scope.data0 = null;
$scope.urls = [ // List of REST api calls with with all the streams we want.
'http://api.speedrunslive.com/test/teamK',
];
$http.get($scope.urls[0]).success(function(data) {
$scope.data0 = angular.fromJson(data);
console.log(angular.fromJson(data))
});
});
</script>
</head>
<body ng-app='player2'>
<div ng-controller="MainController">
<table class="table-size" ng-repeat="chan in data0.channels">
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr>
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
</div>
</body>
</html>
Attached a plunker with the code in it.
Plunker
The thing you want to repeat is the tr, so put your repeat on there. At the moment you are repeating whole the table. The following should work:
<table class="table-size" >
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr ng-repeat="chan in data0.channels">
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>