CODEWITHSUNDEEP
angularjs
siva
siva

Reputation: 613

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

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:

enter image description here

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.

Upvotes: 3

Views: 2648

Answers (1)

Daniel
Daniel

Reputation: 6491

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>

Upvotes: 1

Related Questions