AngularJS Firebase数据库使用ngTableParams将重复过滤的数据转换为ngtable

时间:2016-11-08 22:15:20

标签: angularjs arrays firebase angularjs-ng-repeat firebase-realtime-database

我根据另一个Firebase数据库过滤一个Firebase数据库并将结果连接成一个$scope并在带有projectslist的ngtable中重复$ scope数组ng-repeat="obj in projectslist",这样可以正常工作! 但是,当我想将ngTableParams添加到我的表中时,它会断开并仅显示数组中的第一个对象。
这次我重复这样:ng-repeat="obj in $data"
这是连接数组的控制台日志:
enter image description here
这是控制器:

app.controller('ProjectCtrl', ["$scope", "$filter", "ngTableParams", "firebase", "Auth", "DatabaseRef", "$firebaseArray", "$firebaseObject",
    function ($scope, $filter, ngTableParams, firebase, Auth, DatabaseRef, $firebaseArray, $firebaseObject) {

        var userId = firebase.auth().currentUser.uid;

        $scope.projectslist = [];

        var projectsRef = DatabaseRef.ref('/users/' + userId).orderByKey().once("value")
            .then(function onSuccess(snapshot) {
                snapshot.child("projects").forEach(function (childSnapshot) {
                    var userprojects = childSnapshot.val();

                    var projectquery = DatabaseRef.ref("projects").orderByKey().equalTo(userprojects);
                    var list = $firebaseArray(projectquery);
                    $scope.list = $firebaseArray(projectquery);
                    list.$loaded(function(){
                        $scope.projectslist = $scope.projectslist.concat(list);

                    });
                    var data =  $scope.list;
                    data.$loaded().then(function(data) {
                        $scope.tableParams = new ngTableParams({
                            page: 1, // show first page
                            count: 7, // count per page
                        }, {
                            dataset: data,
                            filterSwitch: true,
                            getData: function ($defer, params) {
                                var filteredData = params.filter() ? $filter('filter')(data, params.filter()) :  data;
                                var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : data;

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

                            }
                        });
                    });
                });


            });    
}]);

问题是:

如何使用ngTableParams同时重复表格中的数据,过滤,排序,分页?

1 个答案:

答案 0 :(得分:1)

您需要先对数据进行排序,然后进行过滤,然后才能对数据应用分页。

$scope.tableParams = new NgTableParams(
                {
                    page : 1, // show first page
                    count : 5, // count per page
                },
                {
                    getData : function($defer, params) {
                        {
                            if (!$scope.projectslist|| !$scope.projectslist.length) { return; }
                            $scope.data = params.sorting() ? $filter('orderBy')($scope.projectslist, params.orderBy()) : $scope.projectslist;
                            $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()):$scope.data;
                            $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
                            $defer.resolve($scope.data);
                        }
                    }
                });  

然后你可以在html中使用它,如下面定义的



<table ng-table="tableParams" class="table table-striped responsive"  show-filter="true" border="1" cellspacing="1" style="padding-left: 100px;padding-right: 100px;">
					  <tbody ng-repeat="obj in $data">
						<tr ng-form="rowForm">
				
							<td data-title="'Project Name'" filter="{'project_name':'text'}" sortable="'project_name'"
								style="overflow: auto; -webkit-overflow: auto;"
								><label>{{obj.project_name}}</label>
							</td>
                          <!--<td>

  More rows </td>-->
</table>
&#13;
&#13;
&#13;