How to make angularjs table directives

Question

The table's content is loaded by ajax and I want to show loading content like this. How can I turn these two ng-show into directive

<table>
    <tr>
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
    </tr>
    <tr ng-show="isLoading">Loading...</tr>
    <tr ng-show="!isLoading" ng-repeat="log in logs">
        <td>{{log.aaa}}</td>
        <td>{{log.bbb}}</td>
        <td>{{log.ccc}}</td>
    </tr>
</table>

What exactly would you want directive to do? Seems like over complicating something that is already really simple, easy to read and is core functionality. Also note that <table> is very limited on allowed types of child elements so you can't use a custom tag as a child of <table> — charlietfl
– charlietfl, Commented May 29, 2016 at 5:20
Actually I'd like to make a directive like <table><tr>...</tr><tr loading ng-repeat="xxx"></tr></table> — fish_tree
– fish_tree, Commented May 29, 2016 at 6:07
Well that is quite different from question asking only how to turn ng-show's into directive. Would likely help for you to read How to Ask. being as detailed and specific as possible avoids confusion and guessing on our part. Asking a good question does take a bit of effort but will also get much quicker response — charlietfl
– charlietfl, Commented May 29, 2016 at 6:11

Huy Chau · Accepted Answer · 2016-05-29 06:02:37Z

1

tableDirective:

angular.module('app', [])
  .directive('tableDirective', function() {
    return {
      restrict: 'E',
      scope: {
        isLoading: '=',
        logs: '='
      },
      templateUrl: 'table.html'
    }
});

table.html:

<table>
    <tr>
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
    </tr>
    <tr ng-show="isLoading">Loading...</tr>
    <tr ng-show="!isLoading" ng-repeat="log in logs">
        <td>{{log.aaa}}</td>
        <td>{{log.bbb}}</td>
        <td>{{log.ccc}}</td>
    </tr>
</table>

view:

<table-directive is-loading="isLoading" logs="logs"></table-directive>

isLoading and logs from your controller.

answered May 29, 2016 at 6:02

Huy Chau

2,24821 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

How to make angularjs table directives

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