How To Bind Dynamic List from AngularJS to Html Table?

Question

I have a Angular Function

             vm.OpenBManageContractBillingReport = function () {
                 reportService.GetContractBillingList(vm.Search).then(function (response) {
                     console.log(response);
                vm.contractBillingReportList = response;
            }, function (err) {

            });
        };

which gives the output of the list from API and the dynamic list is stored in vm.contractBillingReportList. But the Output may be different According to Start Date and End Date Parameter in vm.search. For Ex:- IF start Date Parameter is 1/1/2018 and End Date Parameter is 31/1/2018 the Result Provides Only One Column January 2018. Similarly, IF start Date Parameter is 1/1/2018 and End Date Parameter is 31/12/2019 the Result Provides 24 Col from January 2018 to December 2019. How Can I bind this data with Header Column in HTML Table?

            <div class="clearfix">
           <div class="reportTable">
               <div class="col-sm-12" style="padding:0;">
                   <table class="table table-bordered">
                       <thead>
                           <tr></tr>
                       </thead>
                       <tbody>
                           <tr ng-repeat="item in vm.contractBillingReportListtrack by $index">
                               <td></td>

                           </tr>
                       </tbody>
                   </table>
               </div>
           </div>
       </div>

3960278 · Accepted Answer · 2019-07-18 09:02:53Z

1

Assuming contractBillingReportList is an array of objects with keys of the object required as header. Just loop for keys in the first element and display those keys as headers.

<tr>
  <th ng-repeat="(header, value) in vm.contractBillingReportList[0]">{{header}}</th>
</tr>

answered Jul 18, 2019 at 9:02

3960278

8167 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How To Bind Dynamic List from AngularJS to Html Table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related