Question

如何 ng-repeat 以下数组的值作为 ng-table 的列标题？
我试图将$scope.cols数组的值显示为我的表的列标题，换句话说显示为字段，并显示所有行。

这是我的尝试：

<div ng-controller="mycontroller as projects">
    <table ng-table-dynamic="projects.tableParams with projects.cols"
           show-filter="true" class="table table-bordered table-striped">
        <tr ng-repeat="row in $data">
            <td ng-repeat="col in $columns">{{::row[col.field]}}</td>
        </tr>
    </table>
</div>

这是我的控制器：

app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {

    //show all projects

    var showallprojects = DatabaseRef.ref("projects").orderByKey();
    $scope.allprojectslist = $firebaseArray(showallprojects);
    var data = $scope.allprojectslist;
    data.$loaded().then(function(data) {
        console.log(data.length); // data is loaded here
        $scope.cols = Object.keys(data[0]);
        console.log($scope.cols);
        $scope.tableParams = new ngTableParams({
            page: 1, // show first page
            count: 7, // count per page
            sorting: { country: "asc" },
            filter : {
            }
        }, {
            filterSwitch: true,
            total: 0, //data.length, // length of data
            getData: function ($defer, params) {
                // use build-in angular filter
                var filteredData = params.filter() ?
                    $filter('filter')($scope.allprojectslist, params.filter()) :
                    $scope.allprojectslist;             
                var orderedData = params.sorting() ?
                    $filter('orderBy')(filteredData, params.orderBy()) :                    
                    $scope.allprojectslist;

                params.total($scope.allprojectslist.length);
                // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));                
            }
        });
    });
}]);

注意：

ngtable动态模型取自here和doc is here。

Answer 1

修改

我可能误解了你的问题，我认为上面的代码并不是st-table示例的副本。

在您的方案中，如果您希望将每个$scope.cols值显示为标题，则需要ng-repeat="col in cols"并打印出当前的col值{{col}}。

我假设你的data在表体内是一个对象数组，每个对象都是[col] => value的形式。

我正在更新下面的代码示例。

你只需要更好地构建你的桌子。

<div ng-controller="mycontroller as projects"> <table ng-table-dynamic="projects.tableParams with projects.cols" show-filter="true" class="table table-bordered table-striped"> <thead> <tr> <th ng-repeat="col in cols">{{col}}</th> </tr> </thead> <tbody> <tr ng-repeat="row in data"> <td ng-repeat="col in col">{{ row[col] || "empty"}}</td> </tr> </tbody> </table> </div>

所以基本上我们将$ columns数组循环一次以构建表的标题;然后我们循环$ data数组来获取一个对象数组（我想），每次迭代都是一个新行;然后在每一行内部，我们再次循环$ columns数组以获取我们正在查找的col.field，并且每次迭代都将在我们的行中成为新的<td>。

希望这有帮助。

angularjs如何将数组值重复为列标题

注意：

1 个答案: