I am using Angular table pagination. I have a serial number that starts from 1 for each page, but I want continuous page numbers. How to get it?
<div ng-app="myApp" ng-controller="myController">
<table id="myData">
<thead>
<td>S.no</td>
<td>Name</td>
<td>Age</td>
</thead>
<tbody>
<tr dir-paginate="data in details | itemsPerPage:3">
<td>{{$index+1}}</td>
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</tbody>
</table>
</div>
Full code: https://jsfiddle.net/mLvLzzg7/4/
If I try:
<td>{{itemsPerPage * (currentPage - 1) + $index + 1}}</td>
It is returning null. Any suggestions?
Formula for calculating the index is correct, but you didn't initialize your variables properly:
app.controller('myController', function($scope) {
$scope.itemsPerPage = 3;
$scope.currentPage = 1;
$scope.details = [{
...
}];
}
<tr dir-paginate="data in details | itemsPerPage:itemsPerPage" current-page="currentPage">
<!-- now you can use itemsPerPage and currentPage to calculate index value -->
<td>{{($index + 1) + (currentPage - 1) * itemsPerPage}}</td>
</tr>
Also, your fiddle didn't include dirPagination directive:
angular.module('myApp', ['angularUtils.directives.dirPagination']);
And I updated jQuery version to newer one in the jsfiddle - now the app works fine.
Related
I am having an array which looks something like this,
var object = [ "ABCD" , "EFGH" , "IJKL", "MNOP", "QRST", "UVWX" ];
$scope.object = object;
I want to use ng-repeat to make a table and each row in table should consist of 3 columns.
The table should look like this,
Name Numb Type
ABCB EFGH IJKL
MNOP QRST UVWX
This is what my table looks like,
<thead>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</thean>
<tr ng-repeat = "x in object">
<td>{{x}}</td>
</tr>
I am not able to maintain 3 items per row here.
To do this you will simply need to update $scope.object with a nested array of size 3, so that we can print the first three items in each row like:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];
// Update array to size of three items instead like
var size = 3;
$scope.object = [];
for (var i = 0; i < object.length; i += size) {
$scope.object.push(object.slice(i, i + size));
}
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in object">
<td>{{x[0]}}</td>
<td>{{x[1]}}</td>
<td>{{x[2]}}</td>
</tr>
</tbody>
</table>
</div>
</section>
If you wan to make td also dynamic, you can use ng-repeat for table cells also like:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];
// Update array to size of three items instead like
var size = 3;
$scope.object = [];
for (var i = 0; i < object.length; i += size) {
$scope.object.push(object.slice(i, i + size));
}
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in object">
<td ng-repeat="cell in row">{{cell}}</td>
</tr>
</tbody>
</table>
</div>
</section>
You can solve it by the view side:
<thead>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</thean>
<tr ng-repeat = "x in object" ng-if="$index % 3 === 0">
<td>{{object[$index]}}</td>
<td ng-if="object[$index + 1]">{{object[$index + 1]}}</td>
<td ng-if="object[$index + 2]">{{object[$index + 2]}}</td>
</tr>
I am writing an Angular application and I have an old code i want to convert this angular js code to angular
table.html
<table ng-repeat="group in vm.groups" style="float: left">
<thead>
<tr>
<th><b>Sl. No</b></th>
<th><b>Generated Code</b></th>
</tr>
</thead>
<tr ng-repeat="g in group.values">
<td ng-style="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{$parent.$index * 10 + $index + 1}}</td>
<td ng-style="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{g.value}}</td>
</tr>
</table>
table.ts
app.controller('Ctrl', function() {
var vm = this;
var items = [{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'}];
vm.groups = [];
var i,j,temparray,chunk = 10;
for (i=0,j=items.length; i<j; i+=chunk) {
temparray = items.slice(i,i+chunk);
vm.groups.push({values: temparray});
}
});
i Want to convert this code to Angular2+. I am new to angular please help me.
Angular 2 onwards you should use *ngFor directive to loop over array.
so , your component.html should look like below :
<table *ngFor="let group of groups; let i=index">
<thead>
<tr>
<th><b>Sl. No</b></th>
<th><b>Generated Code</b></th>
</tr>
</thead>
<tr *ngFor="let g of group.values; let x=index" [ngClass]="(x%2===0)?'even':'odd'">
<td>{{i * 10 + x + 1}}</td>
<td>{{g.value}}</td>
</tr>
</table>
Below is the Angular 8 conversion of your code : demo
Is there a way in AngularJS that I can dynamically ID or in a dynamic table? I have this table that dynamically adds rows.
<table class="table table-striped">
<thead>
<tr>
<th style="text-align:center">{{nameBlue}}</th>
<th style="text-align:center">Round</th>
<th style="text-align:center">{{nameRed}}</th>
</tr>
</thead>
<tbody class="tablerows">
<tr ng-repeat="x in tableArray track by $index">
<td>Red Corner</td>
<td>Round {{$index}}</td>
<td>Blue Corner</td>
</tr>
</tbody>
</table>
and my script
//Create the module
var myApp = angular.module("myModule", []);
//Create the controller and register the module in one line
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
$scope.selectedRounds = 0;
$scope.tableArray = [];
$scope.getRoundsArray = function() {
$scope.tableArray = new Array( $scope.selectedRounds * 1);
}
});
So the amount of rows in the table are dynamically selected and added. Red Corner and Blue Corner will be replaced with drop down lists which have a 1 to 10 value. At the end of the table I will sum the drop down list values so I want to be able to do math on round1Red + round2Red .. and so on. Is there a way I can dynamically assign IDs to each when the table is created?
You can dynamically add IDs to the table like so:
<tr ng-repeat="x in tableArray track by $index">
<td id="redCorner{{$index}}">Red Corner</td>
<td>Round {{$index}}</td>
<td id="blueCorner{{$index}}">Blue Corner</td>
</tr>
This should give you unique red and blue corner IDs for each row of the table in the form of redCorner0, blueCorner0, redCorner1.... Let me know if this helps.
Having a problem with in ng-init and ng-repeat angularjs
i'm trying to loop the fields rates to get the total
for example this is my table
nane +++++++id+++++++rate
joe +++++++++1+++++++3
joe +++++++++2+++++++3
joe +++++++++3+++++++3
joe +++++++++4+++++++3
this my code.
<table>
<tr>
<td>name</td>
<td>rate</td>
</tr>
<tr ng-repeat="item in videos">
<td>{{item.name}}</td>
<td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td>
</tr>
<tr>
<td>Total</td>
<td>{{videos.total.rate}}</td>
</tr>
The Result that I get is 3333 instead of 12 when added all together
this is the line with problem
<td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td>
if i change it to a number it works fine.
<td ng-init="videos.total.rate = videos.total.rate + 3">{{item.rate}}</td>
your help would be great.thanks
Try something like this in controller.
JS
$scope.RateTotal= 0;
for (var i = 0; i < data.length; i++) {
$scope.RateTotal= $scope.RateTotal + data[i].rate;
}
HTML
<p>{{RateTotal}}</p>
Option above is better, but if you want use ng-init use something like this.
<table ng-init="RateTotal = 0">
<thead>
<th>Rate</th>
</thead>
<tbody>
<tr ng-repeat="item in videos">
<td ng-init="$parent.RateTotal= $parent.RateTotal + item.rate">{{item.rate}}</td>
</tr>
<tr>
<thead>
<tr>
<th>Total</th>
<th>{{RateTotal}}</th>
</tr>
</thead>
</tr>
</tbody>
</table>
P.S.
This directive can be abused to add unnecessary amounts of logic into
your templates. There are only a few appropriate uses of ngInit, such
as for aliasing special properties of ngRepeat, as seen in the demo
below; and for injecting data via server side scripting. Besides these
few cases, you should use controllers rather than ngInit to initialize
values on a scope. - ngInit
move this logic into the controller. That is what it is for. The view should be displaying data.
Now you have to worry about how to cast strings to an integer and writing 4x more code in a language that angular must interpret into javascript.
The complexity you are adding here is going to be fun to maintain.
but you probably want to continue doing it wrong, in which case this should work: <table ng-init='videos.total = {"rate": 0}'>
Define a filter to calculate the total:
app.filter('calculateRateTotal',function(){
return function(input){
var total = 0;
angular.forEach(input,function(value,key){
total = total+value.rate;
});
return total;
};
});
HTML:
<td ng-bind="videos | calculateRateTotal"></td>
After 10hrs of no luck just my managed to get it right. turned to be very simple.
This is the code.
In the Controller added
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.videos.length; i++){
var item = $scope.videos[i];
total += (item.rate*1);
}
return total; }
And HTML
<table>
<tr>
<th>Rate</th>
</tr>
<tr ng-repeat="item in videos">
<td>{{item.rate}}</td>
</tr>
<tr>
<td>Total: {{ getTotal() }}</td>
</tr>
</table>
Thanks everyone for helping
I want to create a table with products on a certain menu of a store.
The table is divided by categories (product categories) and for every category the desired products should be shown under his category.
Something like:
I am able to get the different categories in my html but when I want to use ng-repeat on table rows or table headers I get nothing...
<table class="table table-hover">
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-app="categories" ng-cloak="" ng-controller="category" ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
AngularJS
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
$scope.categories = results.data;
for(var i = 0; i < $scope.categories.length; i++){
var categories = $scope.categories[i];
}
});
});
What is going wrong here?
Try this following code:
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
var categorie = results.data;
for(var i = 0; i < categorie.length; i++){
$scope.categories = categorie[i];
}
});
});
I found the solution myself:
<table ng-app="categories" ng-cloak="" ng-controller="category">
<tr>
<th>Menu items</th>
</tr>
<tr ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
You shouldn't have ng-repeat of on your ng-app & ng-controller div. Even you don't need to do for loop. You categories does have category in it. You can access those inside ng-repeat using c only no need to specifying any index in it.
Markup
<body class="table table-hover" ng-app="categories" ng-cloak="" ng-controller="category" >
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-repeat="c in categories">
<th>{{c}}</th>
</tr>
</table>
</body>