使用angular指令生成完全动态的列(字段)和行(数据)表

generating table using angular directive with completely Dynamic columns(fields) and rows(data))

本文关键字：字段 和行 数据 动态 指令 angular 使用      更新时间：2023-09-26

我想写一个指令(使用angular)创建具有动态列(字段)和行(数据)的表。列名称将作为字符串数组传递给指令，如下所示:$scope.TableDate.Fields = ['Name', 'LastName','ssn'];，行(数据)将作为json对象数组传递，如下所示:

    $scope.TableDate.Data = [
        { Name: 'a', LastName: 'b', ssn:456 },
        { Name: 'c', LastName: 'd', ssn:123 }
    ];

如果唯一的数据是动态的(具有固定的列名)，我的代码工作得很好这是我的代码与固定列名

 App.directive('tableGenerator', function () {
    return {
        template:
            '  <table border="1" ng-Click="Test()">' +
            '<thead>' +
            '<tr>' + '<th>' + 'Name' +  '</th>' +
             '<th>' + 'LastName' + '</th>' +
             '<th>' + 'ssn' + '</th>' +'</tr>' +
            '</thead>' +
            '<tbody' + ' ' + 'ng-repeat="tb in tbodydata"' + '>' +
            '<tr>'+  '<td>' + '{{tb.Name}}' +  '</td>' +
            '<td>' + '{{tb.LastName}}' +  '</td>' +
             '<td>' +  '{{tb.ssn}}' +   '</td>' + '</tr>' +
            '</table>',
        restrict: 'E',
        replace: true,
        scope: {
           tbodydata: "=", fields: "="
        },
        link: function ($scope, $element, $attrs, form) {
            $scope.field = $scope;
        }
    };
});

但是因为一切都应该是动态生成的，我的实际代码如下:

var App = angular.module('Test', []);
App.directive('tableGenerator', function () {
    return {
        template:
            '  <table border="1">' +
            '<thead>' +
            '<tr>' +
            '<th' + ' ' + 'ng-repeat="fieldName in fields"' + '>' +
             '{{fieldName}}' +
            '</th>' +
            '</tr>' +
            '</thead>' +
            '<tbody' + ' ' + 'ng-repeat="tb in tbodydata"' + '>' +
            '<tr>'+
            '    <td' + ' ' + 'ng-repeat="fieldName in fields"' + '>' +
            '{{tb.fieldName}}' +
            '</td>' +
            '</tr>' +
            '</table>',
        restrict: 'E',
        replace: true,
        scope: {
            tbodydata: "=", fields: "="
        },
        link: function ($scope, $element, $attrs, form) {
            $scope.field = $scope;
        }
    };
});
App.controller('TableGenerator', function ($scope) {
    $scope.TableDate = {};
    $scope.TableDate.Fields = ['Name', 'LastName','ssn'];
    $scope.TableDate.Data = [
        { Name: 'a', LastName: 'b', ssn:456 },
        { Name: 'c', LastName: 'd', ssn:123 }
    ];
});

在HTML中使用，如下所示:

 <table-generator tbodydata="TableDate.Data" fields="TableDate.Fields"></table-generator>

我必须使用两个ng-repeat一个用于迭代日期，另一个用于迭代字段主要问题是我无法访问父ng-repeat的作用域值，通过指向其他ng-repeat的作用域变量，如{{tb.fieldName}}， **不起作用。什么好主意吗?

您正在做的错误是您试图调用tb.fieldName，这相当于tb = { fieldName: 'myvalue'}。

你不想那样，对吧?

如果你的属性名是字符串，你访问一个对象的特定属性的方式是这样做

tb[fieldName]

阅读更多

从上面的页面。如果你的对象看起来像这样:

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

你也可以这样访问它:

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;
相关文章：