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?

Frank Modica · Accepted Answer · 2017-07-07 11:32:03Z

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.

answered Jul 7, 2017 at 11:32

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related