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

});

以上代码生成的标题与行数一样多，我想要一次填充标题行...我需要模板动态，我正在尝试CRUD表。

Answer 1

您只需要第一项设置标题而不是整个列表

试试这个

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

指令反复生成标题

1 个答案: