Question

我想写一个指令（使用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一个用于迭代日期，另一个用于迭代字段 主要问题是我无法通过poing到其他ng-repeat的范围变量来访问父ng-repeat的范围值，例如{{tb.fieldName}} ** {没有＆＃ 39;工作。有什么想法吗？

Answer 1

您所犯的错误是您试图拨打相当于tb.fieldName的{{1}}。

你不想要那个，不是吗？

如果属性名称是字符串，则访问对象的特定属性的方法是执行此操作

tb = { fieldName: 'myvalue'}

使用带有完全动态列（字段）和行（数据）的angular指令生成表）

1 个答案: