Question

我有一个数组，我需要将其转换为表格式，以HTML格式显示。

    <table>
        <tr>
            <th ng-repeat='(key, value) in data[0]'>{{key}}</th>
        </tr>
        <tr ng-repeat="(key,value) in data">
            <td ng-repeat="item in data[key]" ng-if="$index!=0">{{item}}</td>

        </tr>
    </table>

var data = [{
    "recordno": "001",
        "firstname": "Brock",
        "middlename": "Edward",
        "lastname": "Lesnar",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}, {
    "recordno": "002",
        "firstname": "John",
        "middlename": "E",
        "lastname": "Cena",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}];

function TableController($scope) {
    $scope.data = data;
}

我面临两个问题： -

表中的数组自动排序。我想在Array中显示记录。
我想将Status值显示为button＆amp;点击btn时，它会调用ng-click。

这样做的正确方法是什么？

还有其他方法可以做到这一点。因为Array是动态传递的。

Answer 1

由于不同的浏览器对（非数组）对象的键的排序有不同的约定，我建议你有一个额外的列名数组，以确保你的值总是按预期呈现（在所有浏览器中）。

然后，您可以使用过滤器根据columns数组中指定的顺序将任何项目（数据中）转换为数组。

实现可能如下所示：

var columns = [...];
var data = [...];

.controller('TableController', function ($scope) {
    $scope.columns = columns;
    $scope.data = data;
})

.filter('sortByColumn', function () {
    return function (obj, columns) {
        var item = [];
        angular.forEach(columns, function (col) {
            item.push(obj[col]);
        });
        return item;
    };
});

然后，您可以像这样修改HTML：

<table>
    <tr><th ng-repeat="col in columns">{{col}}</th></tr>
    <tr ng-repeat="item in data">
        <td ng-repeat="val in item | sortByColumn:columns">{{val}}</td>
    </tr>
</table>

另请参阅此 short demo 。

<强>更新

或者，请参阅此 other short demo ，其中包含一个按钮。

Answer 2

我使用的功能如下

function RepeatData(TemplateString, JSONValue, JOSNFields, Parent, Options) {
        var settings = $.extend({ "OnItemBound": null, "Delimiter": "" }, Options);
        for (var i = 0; i < JSONValue.length; i++) {
            var rowValue = TemplateString;
            for (var j = 0; j < JOSNFields.length; j++) {
                rowValue = rowValue.replace(new RegExp(settings.Delimiter + JOSNFields[j] + settings.Delimiter, 'g'), JSONValue[i][JOSNFields[j]]);
            }
            var rowElement = $(rowValue);
            if (settings.OnItemBound)
                settings.OnItemBound(rowElement, JSONValue[i]);
            Parent.append(rowElement);
        }
}

你需要像这样调用这个函数假设我的数据是

var dataExample = [{
    "recordno": "001",
        "firstname": "Brock",
        "middlename": "Edward",
}, {
    "recordno": "002",
        "firstname": "John",
        "middlename": "E",
}];

然后

RepeatData("<tr><td>#firstname#</td><td>#middlename#</td></tr>",dataExample,['firstname','middlename'],$("#divTableContainer").find("tbody"),{ "OnItemBound": function (rowElement, rowData) { AddSelectionProperty(rowElement, rowData) }, "Delimiter": "#" });

不确定这是否符合您的需求，但这会对您有所帮助

表HTML中的动态数组

2 个答案: