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
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.
I have created this app in Angular as a practice can't seem to add the amount to a total value... Here is the Code I need to put the total value of the amount.
<body>
<div class="container" ng-app="myApp" ng-controller="namesCtrl">
<div class="col-sm-6"><br>
<button class="btn btn-default" ng-click="myFunc()">Show me the Table</button><br>
<div ng-show="showMe">
<table class="table" width="80%" border="2px">
<tr class="panel panel-default">
<th> Names</th>
<th>Country</th>
<th>Amount</th>
</tr>
<tr ng-repeat= "x in names">
<td class="info"> {{x.name}}</td>
<td class="danger">{{x.country}}</td>
<td class="default">{{x.amount}}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var app=angular.module("myApp", []);
app.controller("namesCtrl", function($scope){
$scope.names = [
{name:'Jani',country:'Norway', amount:'321'},
{name:'Carl',country:'Sweden',amount:'2231'},
{name:'Margareth',country:'England',amount:'521'},
{name:'Hege',country:'Norway',amount:'1720'},
{name:'Joe',country:'Denmark',amount:'376'},
{name:'Gustav',country:'Sweden',amount:'3040'},
{name:'Birgit',country:'Denmark',amount:'1115'},
{name:'Mary',country:'England',amount:'4501'},
{name:'Kai',country:'Norway',amount:'4533'}
];
$scope.showMe=false;
$scope.myFunc=function(){
$scope.showMe=!$scope.showMe;
}
});
</script>
</body>
</html>
it would be help ful for me to Know how to add the amount to a total value.
Using Array.prototype.reduce():
$scope.total = $scope.names.reduce((a, v) => a + parseInt(v.amount));
Note that you would need to use parseFloat() instead of parseInt() if your amounts contain decimal values.
Here's a complete snippet:
var $scope = {};
$scope.names = [
{name:'Jani',country:'Norway', amount:'321'},
{name:'Carl',country:'Sweden',amount:'2231'},
{name:'Margareth',country:'England',amount:'521'},
{name:'Hege',country:'Norway',amount:'1720'},
{name:'Joe',country:'Denmark',amount:'376'},
{name:'Gustav',country:'Sweden',amount:'3040'},
{name:'Birgit',country:'Denmark',amount:'1115'},
{name:'Mary',country:'England',amount:'4501'},
{name:'Kai',country:'Norway',amount:'4533'}
];
$scope.total = $scope.names.reduce((a, v) => a + parseInt(v.amount), 0);
console.log($scope.total);
you can use javascript reduce method to get the sum of array
ES6 implementation
$scope.sum = $scope.names.reduce((a, b) => a + parseInt(b.amount), 0);
ES5 implementation
$scope.sum = $scope.names.reduce(function(a,b){
return a + parseInt(b.amount)
},0);
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.names = [
{name:'Jani',country:'Norway', amount:'321'},
{name:'Carl',country:'Sweden',amount:'2231'},
{name:'Margareth',country:'England',amount:'521'},
{name:'Hege',country:'Norway',amount:'1720'},
{name:'Joe',country:'Denmark',amount:'376'},
{name:'Gustav',country:'Sweden',amount:'3040'},
{name:'Birgit',country:'Denmark',amount:'1115'},
{name:'Mary',country:'England',amount:'4501'},
{name:'Kai',country:'Norway',amount:'4533'}
];
/// es6
$scope.sum = $scope.names.reduce((a, b) => a + parseInt(b.amount), 0);
console.log('es6 - '+$scope.sum)
/// es5
$scope.sum = $scope.names.reduce(function(a,b){
return a + parseInt(b.amount)
},0);
console.log("es5 - "+$scope.sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
</div>
is there any way to highlight a particular table row?
I have a table and a set if angular codes for example for example:
angular.module('myApp', []).controller('myTest', function($scope) {
var data = [];
for(var i = 0; i < 10; i++) {
data[i] = i;
}
$scope.data = data;
});
HTML:
<table ng-app="myApp" ng-controller="myTest">
<tr ng-repeat="x in data">
<td > {{ x }} </td>
</tr>
</table>
http://jsfiddle.net/omarjmh/Lvc0u55v/1895/
Is there anyway to do it like
if x is equal to 1
then
css:highlight tr: blue
?
Thanks!
you can use $even and $odd for this.
angular.module('myApp', []).controller('myTest', function($scope) {
var data = [];
for(var i = 0; i < 10; i++) {
data[i] = i;
}
$scope.data = data;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myApp">
<div ng-controller="myTest">
<table >
<tr ng-repeat="x in data" ng-style="{'background-color': ($even ? 'green' : 'red')}">
<td > {{ x }} </td>
</tr>
</table>
</div>
</div>
use ngStyle:
tr ng-repeat="x in data" ng-style="{'background-color': (x === 1 ? 'blue' : 'white')}"
You can achieve it by using CSS,
tr:nth-child(even) {
background-color: #000000;
}
even/odd both works.
Or with angular,
You should be using the angular directives ngClassEven and ngClassOdd for this.
Have a look at the documentation section for how to use them
http://docs.angularjs.org/api/ng.directive:ngClassEven
http://docs.angularjs.org/api/ng.directive:ngClassOdd