如何动态显示使用angularjs的表中的对象数组？ [英] How display array of objects in table using angularjs dynamically?

问题描述

我使用angular.js作为我的font-end，node.js作为服务器端和PostgreSQL作为数据库。

现在，我有一些值列表在数据库中。

数据库：

控制器代码：

我在 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。允许'，
 salary_head_value：1800，
 salary_head_type：'E'
}，{
 salary_head_name：'PF'，
 salary_head_value：1800，
 salary_head_type ：'D'
} 
]; 
  

注意：为了便于阅读，我只在上面的数组中打印了几条记录（手动编辑），实际上它会打印所有记录。

UI中的预期输出：

并且我想打印收入的总和总共字段中的c>和扣除。 使用

ng-repeat 对于基本的Idea，请看以下代码： data-hide =false>

（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。允许'，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-ngRepeat-production< / title> < link href =animations.css =stylesheettype =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> <表> < TR> <的第i;收益与LT; /第> <的第i;量及LT; /第> <的第i;的类型< /&第GT; < / TR> < tr ng-repeat =项目中的项目> < TD> {{item.salary_head_name}}< / TD> < TD> {{item.salary_head_value}}< / TD> < TD> {{item.salary_head_type}}< / TD> < / TR>< /表> < / div>< / body>< / html>  

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.

解决方案

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>

这篇关于如何动态显示使用angularjs的表中的对象数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！