How to replicate a HTML table code when clicked on a button using angular js?

Question

I have whole table created in a Html but I want to implement the functionality where if I click on a text I need to replicate the same table (Html) code in my application.

My HTML :

  <th class="bx--table-header bx--table-sort" data-event="sort" ng-click="vm.addTowerTable()">
    <a class="text-decoration-none"><i class="fa fa-plus-circle" aria-hidden="true" style="padding-right:10px;"></i>Add Tower</a>
</th>

I have a ADD TOWER as my text when I click on it I need to add a whole table... How can I implement it using angularjs?

Answer 1

You could use ng-repeat to loop over a dummy array whose length is the number of tables you need:

<table ng-repeat="table in vm.tables">
    ...
    <th ng-click="vm.addTowerTable()">
        ...
    </th>
</table>

And then in your controller:

// Right now I am just pushing null since we need something in the
// array. You could push some data about each table.
vm.tables = [null];

vm.addTowerTable = function() {
    vm.tables.push(null);
};

If you don't like using a dummy array, check out some other solutions people have come up with to make it look a little nicer.