我正在将angular.js用于font-end,将node.js用于服务器端。
现在,我随机地在数组中列出了一些值。
Html代码:
<html ng-app='app' ng-controller='mainController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table>
<tr ng-show="reports.length!=0" ng-repeat="report in reports">
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
<td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>
</tr>
</table>
</div>
</div>
<pre>{{ cleanData | json}}</pre>
</body>
</html>
控制器代码:
angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);
输出:
预期结果:
在上面的输出中,我想按照控制器中的数组顺序打印标记结果。
然后是前五个字段代码
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
不应更改并保留<td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>
应该在ng-repeat中使用。
答案 0 :(得分:1)
ng-repeat
默认按字母顺序排列objects
。
如果你想避免使用:
$scope.noAlphabetSortPlease = function(obj){
return Object.keys(obj);
}
在你的HTML中:
<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
工作片段:
angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.noAlphabetSortPlease = function(obj){
return Object.keys(obj);
}
$scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app='app' ng-controller='mainController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table>
<tr ng-show="reports.length!=0" ng-repeat="report in reports">
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
</tr>
</table>
</div>
</div>
<pre>{{ cleanData | json}}</pre>
</body>
</html>
&#13;