How to reuse html template within the same view and controller in AngularJS?

Question

I have a form template as shown below.

<form editable-form name="tableForm">
    <table>
       <tr style="font-weight: bold">

           // Column names here....

       </tr>
       <tr ng-repeat="user in list1>

          //Column values here ...

       </tr>
    </table>
</form>

I want to reuse this template for creating multiple table within same page/controller using different model e.g. list1, list2, list3 etc.

How can I pass the name of the form and model dynamically so that all these tables's operation works independently of each other and still I need not repeat same html with different form name and list model inside my view.html?

Thanks

Take a look in directive.

Stepan Kasyanenko
– Stepan Kasyanenko

2016-09-05 10:40:54 +00:00
Commented Sep 5, 2016 at 10:40 — Stepan Kasyanenko
– Stepan Kasyanenko, Commented Sep 5, 2016 at 10:40
Thanks @StepanKasyanenko. I am looking into that.

Prashant
– Prashant

2016-09-05 11:21:18 +00:00
Commented Sep 5, 2016 at 11:21 — Prashant
– Prashant, Commented Sep 5, 2016 at 11:21

Razzka · Accepted Answer · 2016-09-05 13:24:48Z

4

You can add a directive to Your angular application.

First, You have to move Your html to a separate file, then declare a directive:

.directive('tableform', function() {
  return {
    scope: {
      list: '='
    },
    restrict: 'E',
    replace: true,
    templateUrl: '<path to html file>'
  };
});

and, finally, You can use it like this:

<tableform list="list1" />
<tableform list="list2" />
...

edited Sep 5, 2016 at 13:24

answered Sep 5, 2016 at 13:16

Razzka

6415 silver badges16 bronze badges

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

Comments

Muhammad Ahmar Khan · Accepted Answer · 2022-02-16 13:45:40Z

0

In Controller:

scope.dataLists = [ [list1], [list2], [list3] ]

Main View:

<form editable-form name="tableForm">
    <div ng-repeat="list in dataLists" ng-include="'reuseable-table.html'"></div>
</form>

reuseable-table.html:

<table>
  <tr style="font-weight: bold">

  </tr>
  <tr ng-repeat="user in list">
  
  </tr>
</table>

answered Feb 16, 2022 at 13:45

Muhammad Ahmar Khan

3491 gold badge3 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to reuse html template within the same view and controller in AngularJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related