How display array of objects in table using angularjs dynamically?
Question
I am using angular.js for my font-end, node.js for server side and PostgreSQL for database.
Now, I am having some list of values in DB.
Database:
Controller code:
I got below output in console .
console.log($scope.items);
$scope.items = [
{
salary_head_name : 'BASIC',
salary_head_value : 15000,
salary_head_type : 'E'
}, {
salary_head_name : 'HRA',
salary_head_value : 7500,
salary_head_type : 'E'
},{
salary_head_name : 'Conveyance',
salary_head_value : 1600,
salary_head_type : 'E'
},{
salary_head_name : 'Med. Allow',
salary_head_value : 1800,
salary_head_type : 'E'
},{
salary_head_name : 'PF',
salary_head_value : 1800,
salary_head_type : 'D'
}
];
Note: For readability I printed only few records in the above array (edited manually), actually it prints all the records.
Expected output in UI:
And also I want to print the sum of Earnings and Deductions in the Total fields in the above table.
1 answers
solution1
1 2016-03-10 15:11:20
Use ng-repeat , For basic Idea look at following code:
(function(angular) { 'use strict'; angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) { $scope.items = [{ salary_head_name : 'BASIC', salary_head_value : 15000, salary_head_type : 'E' }, { salary_head_name : 'HRA', salary_head_value : 7500, salary_head_type : 'E' },{ salary_head_name : 'Conveyance', salary_head_value : 1600, salary_head_type : 'E' },{ salary_head_name : 'Med. Allow', salary_head_value : 1800, salary_head_type : 'E' },{ salary_head_name : 'PF', salary_head_value : 1800, salary_head_type : 'D' }]; }); })(window.angular);
table { border: 1px solid #666; width: 100%; } th { background: #f8f8f8; font-weight: bold; padding: 2px; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-ngRepeat-production</title> <link href="animations.css" rel="stylesheet" type="text/css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> <script src="script.js"></script> </head> <body ng-app="ngRepeat"> <div ng-controller="repeatController"> <table> <tr> <th>Earnings</th> <th>Amount</th> <th>Type</th> </tr> <tr ng-repeat="item in items"> <td>{{item.salary_head_name}}</td> <td>{{item.salary_head_value}}</td> <td>{{item.salary_head_type}}</td> </tr> </table> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.