Dynamically display table in Angular

Question

I need to dynamically display a table in Angular, depending on the info coming from the DB

So far, I have this Info

[ { "BET": 57630343, "CUSTOMER": 181645, "XX_FILL OPEN": true },
  { "BET": 57633044, "CUSTOMER": 181645, "XX_FILL OPEN": true },
  { "BET": 57633047, "CUSTOMER": 181645, "XX_FILL OPEN": true },
  { "BET": 57635034, "CUSTOMER": 181645, "XX_FILL OPEN": true } ]

everything with XX... should be a button

and in the HTML

      <table>
        <thead>
          <tr>
            <th>Bet</th>
            <th>Customer</th>
            <th>Fill Open Bet</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="pendingBet in pendingBets">
            <td> {{::pendingBet.BET}}</td>
            <td> {{::pendingBet.CUSTOMER}}</td>
            <td><button class="btn btn-danger">Fill</button></td> <!--{{pendingBet.XX_FILL_OPEN}}-->
          </tr>
        </tbody>
      </table>

the issue I have here is: above I have something static like

            <th>Bet</th>
            <th>Customer</th>
            <th>Fill Open Bet</th>

but sometimes <th>Bet</th> which is <td> {{::pendingBet.BET}}</td> is not coming from the DB, so I don't have to display it, so I want to know what should I do to display it dynamically

what should I do in this case?

EDIT

Let explain myself better:

according to the table, <td> {{::pendingBet.BET}}</td> belongs to <th>Bet</th>, but sometimes pendingBet.BET is null so I don't have to display all that column <th>Bet</th> and <td> {{::pendingBet.BET}}</td>, the same with Customer and Fill Open.

Not sure what you are asking. Are you wanting to remove the whole column if none of the rows have pendingBet.BET? — charlietfl
– charlietfl, Commented Sep 9, 2015 at 22:42
@charlietfl yes. I BET, or CUSTOMER or the other are not coming from the DB, then I should not display that row neither the header. — Non
– Non, Commented Sep 9, 2015 at 22:43
Oh... just row...can use ng-if on the <tr> for that. Or filter the data first in controller — charlietfl
– charlietfl, Commented Sep 9, 2015 at 22:43
@charlietfl why on the <tr> ? is doesn't make any sense, if I apply to the whole <tr>, then when BET isn't coming, nothing will show up. — Non
– Non, Commented Sep 9, 2015 at 22:46

Beyers · Accepted Answer · 2015-09-09 23:16:59Z

1

You can use ng-if on the <th> and <td>:

<table>
    <thead>
      <tr>
        <th ng-if="hasBetColumn">Bet</th>
        <th>Customer</th>
        <th>Fill Open Bet</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="pendingBet in pendingBets">
        <td ng-if="hasBetColumn"> {{::pendingBet.BET}}</td>
        <td> {{::pendingBet.CUSTOMER}}</td>
        <td><button class="btn btn-danger">Fill</button></td> <!--{{pendingBet.XX_FILL_OPEN}}-->
      </tr>
    </tbody>
  </table>

It's up to you to determine how you want to set hasBetColumn, either in your controller or as part of the returned data from your API call.

answered Sep 9, 2015 at 23:16

Beyers

9,11847 silver badges59 bronze badges

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

Comments

maow · Accepted Answer · 2015-09-09 23:26:01Z

1

If all the fields are dynamic:

In you ctrl, you need a array to store the fields you want to display, if you assign it with Object.keys(data[0]) every time you initialize the ctrl, you may not see the same table because properties order in objects are not guaranteed in js.

in ctrl

//Leat's say you have lodash (or underscore, if you dont you should...)
$scope.fields = _.intersection( ["BET", "CUSTOMER", "whatever"],
  _.keys(data ? data[0] : {})
)

in html

<tbody>  
  <!-- ng-repeat on fields in `thead ` -->
  <tr ng-repeat="pendingBet in pendingBets">
      <td ng-repeat="field in fields" ng-bind="::pendingBet[field]"></td>
  </tr>
</tbody>

answered Sep 9, 2015 at 23:26

maow

1,40712 silver badges20 bronze badges

2 Comments

Non Over a year ago

the <th> part is also dynamic.

maow Over a year ago

Yes. just ng-repeat on $scope.fields because $scope.fields will be dynamic based on your data's keys.

Collectives™ on Stack Overflow

Dynamically display table in Angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related