重复生成 header 的指令

Question

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

app.directive('myGridTable', function($http) {

  var tbl_tpl = '';

  var linkFunc = function(scope, element, attrib) {
    $http.get(attrib.src).success(function(response) {
      scope.rows = response.data;
      tbl_tpl = tbl_tpl + "<thead>";
      angular.forEach(scope.rows, function(value, key) {
        tbl_tpl = tbl_tpl + "<tr>";
        angular.forEach(value, function(v, k) {
          tbl_tpl = tbl_tpl + "<th>" + k + "</th>";
        });
        tbl_tpl = tbl_tpl + "</tr>";
      });
      tbl_tpl = tbl_tpl + "</thead>";

      tbl_tpl = tbl_tpl + "<tbody>";
      angular.forEach(scope.rows, function(value, key) {
        tbl_tpl = tbl_tpl + "<tr>";
        angular.forEach(value, function(v, k) {
          tbl_tpl = tbl_tpl + "<td>" + v + "</td>";
        });
        tbl_tpl = tbl_tpl + "</tr>";
      });
      tbl_tpl = tbl_tpl + "</tbody>";

      element.html(tbl_tpl);
    });
  };


  return {
    restrict: 'AE',
    link: linkFunc
  };

});

上面的代码生成了 header 行，我想要一种方法来填充 header 行一次...我需要动态模板，我正在尝试 CRUD table.

Answer 1

您只需要设置第一项的键 header 而不是整个列表

这样试试

tbl_tpl = tbl_tpl + "<tr>";
angular.forEach(scope.rows[0],function(v,k){
     tbl_tpl=tbl_tpl + "<th>" +k + "</th>" ;
});
bl_tpl = tbl_tpl + "</tr>";

而不是

   angular.forEach(scope.rows,function(value,key){
        tbl_tpl = tbl_tpl + "<tr>";
        angular.forEach(value,function(v,k){
             tbl_tpl=tbl_tpl + "<th>" + k + "</th>" ;
        });
        tbl_tpl = tbl_tpl + "</tr>";
   });

重复生成 header 的指令

directive producing header repeatedly

directive

angularjs