如何在angular.js动态中使用嵌套的ng-repeat打印表格行中的数组对象?

时间:2016-04-06 10:54:24

标签: angularjs

我正在将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}];
}]);

输出:

enter image description here

预期结果:

在上面的输出中,我想按照控制器中的数组顺序打印标记结果。

然后是前五个字段代码

    <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中使用。

1 个答案:

答案 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>

工作片段:

&#13;
&#13;
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;
&#13;
&#13;