现在,我在DB中有一些值列表.
数据库：
控制器代码：
我在控制台中得到了以下输出.
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_name : 'Med. Allow',salary_head_value : 1800,{ salary_head_name : 'PF',salary_head_type : 'D' }]; 注意：为了便于阅读,我在上面的数组中只打印了几条记录(手动编辑),实际上它会打印所有记录.
UI中的预期输出：
此外,我还想在上表的总计字段中打印收入和扣减的总和.
解决方法 使用 ng-repeat,基本想法请看下面的代码：(function(angular) { 'use strict';angular.module('ngRepeat',['ngAnimate']).controller('repeatController',function($scope) { $scope.items = [{ salary_head_name : 'BASIC',salary_head_type : 'E' },{ salary_head_name : 'HRA',{ salary_head_name : 'Conveyance',{ salary_head_name : 'Med. Allow',{ salary_head_name : 'PF',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> 总结 以上是内存溢出为你收集整理的html – 如何动态地使用angularjs显示表中的对象数组？全部内容，希望文章能够帮你解决html – 如何动态地使用angularjs显示表中的对象数组？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）