Create a table with rowspan using a template on an angularjs directive

Question

I have created a custom directive to out put a fairly simple tabular data. This is my current code:

app.directive('searchResult', function () {
    return {
        restrict: 'E',
        scope: { content: '=' },
        link: function (scope, element, attrs) {
            var html = '<table class="table table-bordered">';
            angular.forEach(scope.rows, function (row, index) {
            if (row.names.length > 1) { 
               var names = row.names;
                html += '<tr>';
                html += '<td rowspan='+row.names.length+'>'+row.num +'</td>';
                html += '<td>'+names[0] + '</td>';
                html += '</tr>'

                for (var i = 1; i < names.length; i++) {
                   html += '<tr>';
                   html += '<td>'+names[i] +'</td>';
                   html += '</tr>';
                }
           } else {
                html += '<tr>';
                html += '<td>'+row.num +'</td>';
                html += '<td>'+row.names[0] + '</td>';
                html += '</tr>';
        }
        })
        html += '</table>';
        element.replaceWith(html)
        }
    }
});

The problem with this code is the binding. If a user searches a new item, the directive will create a new table above the previously displayed result instead of replacing the old result.

I am trying to use templateUrl and have a template that has {{content}} inside and the binding works. The old search result is replaced by the new one.

Is there a way to perform this table code creation inside a template?

Michał Lach · Accepted Answer · 2015-02-17 12:33:26Z

1

Use $compile service after you are done with your html.

$compile

Instead of:

element.replaceWith(html)

Try:

html = $compile(html);

It should keep all Angular.js binding. However it is not a good practice, as you are forcing an extra scope refresh.

answered Feb 17, 2015 at 12:33

Michał Lach

1,2784 gold badges20 silver badges39 bronze badges

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

3 Comments

Francis Zabala Over a year ago

Thanks! May I know what the best practice would be?

Michał Lach Over a year ago

Create external template, use ng-repeat. Dont concate strings inside your javascript. Dont use forEach use for loop and your brain. jsperf.com/for-vs-foreach/37

Francis Zabala Over a year ago

Got it. I didn't know you can do that with just ng-repeat. Thanks!

Community · Accepted Answer · 2017-05-23 11:57:02Z

0

I solved the my case using templates by using this code:

<table class="table table-bordered">
    <tbody>            
        <tr ng-repeat-start='myEntry in content'>
            <td rowspan="{{myEntry.names.length}}">{{myEntry.num}}</td>
            <td>{{myEntry.names[0]}}</td>
        </tr>
        <tr ng-repeat-end ng-repeat='name in myEntry.names' ng-if="$index > 0">
            <td>{{name}}{{myEntry.names}}</td>
        </tr>
    </tbody>
</table>

Some of the codes are based from the links found in SO:

Thanks it Michał Lach for pointing out of a more elegant way of doing this.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Feb 18, 2015 at 6:59

Francis Zabala

1,0872 gold badges11 silver badges31 bronze badges

Collectives™ on Stack Overflow

Create a table with rowspan using a template on an angularjs directive

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related