Trying to build a table dynamically in Angular

Question

In this plunk I have a directive with a table. I'm trying to add dynamically to the table one row with two cells. Still, the table is showing only one cell. What's wrong with this code?

Javascript

angular.module('app', []);


angular.module('app')
.directive('directive1', function() {


    var directive = {};

    directive.restrict = 'E';

    directive.scope = true;

    directive.template = '<table class="c" border="1"></table>';

    directive.link = function(scope, element, attrs) {

                var t = angular.element(".c");
                var r1 = t.append("<tr></tr>");
                var col1 = r1.append("<td></td>");
                col1.text("1111");
                var col2 = r1.append("<td></td>");
                col2.text("2222");

    };

    return directive;

});

Actually it isn't creating any cell, you can check it inspecting the generated HTML. — developer033
– developer033, Commented Aug 2, 2016 at 2:39

Marcelo Olgiati · Accepted Answer · 2016-08-02 03:54:57Z

1

This could work as well:

var t = angular.element(".c");
var r1 = t.append(angular.element(document.createElement('tr')));
var col1 =angular.element(document.createElement('td')).html("1111");
var col2 =angular.element(document.createElement('td')).html("2222");
r1.append(col1);
r1.append(col2);

answered Aug 2, 2016 at 3:54

Marcelo Olgiati

814 bronze badges

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

Comments

ps0604 · Accepted Answer · 2016-08-02 02:55:17Z

0

This worked:

            var t = angular.element(".c");
            var r1 = $("<tr></tr>")
            t.append(r1);
            var col1 = $("<td></td>");
            r1.append(col1);
            col1.text("1111");
            var col2 = $("<td></td>");
            r1.append(col2);
            col2.text("2222");

answered Aug 2, 2016 at 2:55

ps0604

1,20728 gold badges157 silver badges379 bronze badges

Collectives™ on Stack Overflow

Trying to build a table dynamically in Angular

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related