How to print array object in table row using nested ng-repeat in angular.js dynamically?

Question

I am using angular.js for font-end and node.js for server side.

Now, I am having some list of values in array randomly.

Html code :

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

Controller code :

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}];
}]);

Output:

Expected Result :

In the above output i want to print the marked result in sequence order as per the array in controller.

Then first five field code

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

should not be change and remaining <td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>

should use in ng-repeat.

What do you mean by result is not printed in sequence order? Like your Output, can you add Expected Output? Check this Plnkr, it seems result is printed in sequence order. http://plnkr.co/edit/xQVQo16LzsRp49g05BWb?p=preview — Khalid Hussain
– Khalid Hussain, Commented Apr 6, 2016 at 11:24

Daniel · Accepted Answer · 2016-04-06 13:23:14Z

ng-repeat orders objects alphabetically by default.

If you want to avoid that you can use:

$scope.noAlphabetSortPlease = function(obj){
  return Object.keys(obj);
}

And in your HTML:

<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>

Working snippet:

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}];
}]);

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

in the above as per your out put siva 10001 29 29 21 21 "21" repeated two times ,how to fix this

Collectives™ on Stack Overflow

How to print array object in table row using nested ng-repeat in angular.js dynamically?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related