Versuchen Sie eine Tabelle dynamisch in Angular

Question

In this plunk Ich habe eine Direktive mit einer Tabelle. Ich versuche, der Tabelle dynamisch eine Zeile mit zwei Zellen hinzuzufügen. Dennoch zeigt die Tabelle nur eine Zelle. Was ist mit diesem Code falsch?

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; 

}); 

Answer 1

Dies könnte auch funktionieren:

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); 

Answer 2

Das funktionierte:

  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");