Question

我正在尝试设置带有显示/隐藏列选项的dynamic（api）ng表。
我的数据来自firebase数据库目前，数据已放入表中，但每列的表列标题不是sortable而不是filterable。另一个问题是显示/隐藏复选框没有正确绑定到表格列，因为当选中（取消）复选框时，the show/hide无效并且仍显示所有列。

这是html代码：

<div ng-controller="mycontroller">
<div class="checkbox-inline">
    <label ng-repeat="col in cols"> 
        <input type="checkbox" ng-model-options="{ getterSetter: true }"
        ng-model="col"/> {{col}}
    </label>
</div>
    <table ng-table-dynamic="tableParams with cols"
           show-filter="true" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th ng-if="true" ng-repeat="col in cols">{{col}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in $data">
                <td ng-repeat="col in cols">{{row[col]}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是控制器：

app.controller('ngTableCtrl33', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
    function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
        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()));
                    }
            });
        });
    }]);

Answer 1

这是一个简单的技巧，用于以角度对表格进行排序。

我会将这些添加到表格标题

<th ng-click="sortKey=col;order=!order;" style="cursor:pointer"> {{col}}</th>

我会在ng-repeat

上添加这些参数

<tr ng-repeat="row in $data | orderBy:sortKey:order">

angularjs表列隐藏/显示绑定

1 个答案: