Question

我使用AngularJS创建了一个单页面应用程序。

我从服务器获取数据（ajax请求，然后从对象转换到数组数组）。使用带有分页和排序的ng-repeat显示此数据。

最初我使用了orderby：sortkey：reverse函数，虽然它确实完成了排序，但数据已经被获取并以带有键的对象的形式显示。

现在，由于分页需要数据以数组形式存在，因此分页现在有效，但排序却没有。我的数组如下所示：

现在，它看起来像这样：

我的表看起来像：

<div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" >
                <thead>
                <tr>
                    <th>View</th>
                    <th ng-click="sort(data[2])">Primary Title <span class="glyphicon sort-icon" ng-show="sortKey==data[2]" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                    <th ng-click="sort(data[1])">Primary Authors <span class="glyphicon sort-icon" ng-show="sortKey==data[1]" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                    <th ng-click="sort(data[3])">Publication Date <span class="glyphicon sort-icon" ng-show="sortKey==data[3]" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
                </tr>
                </thead>

                <tbody>
                <tr ng-repeat="data in searchDataValues.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | orderBy:sortKey:reverse">
                    <td ng-click="openModal(data)">
                        <div class="media-box-body">
                            <!--<div class="pull-right btn btn-info btn-sm" id="show">View</div>-->
                            <button id="{{'object-' + $index }}">Show Dialog</button>
                            <dialog id="modal">
                                <p>Hi, I'm a modal!</p>
                                <button id="{{'object1-' + $index }}">Okay</button>
                            </dialog>
                            <script>
                                var modal = document.getElementById('modal');
                                var showBtn = document.getElementById("{{'object-' + $index }}");
                                var closeBtn = document.getElementById("{{'object1-' + $index }}");

                                // Setup an event listener for the show button.
                                if (showBtn){
                                    showBtn.addEventListener('click', function(e) {
                                        e.preventDefault();

                                        // Show the modal.
                                        modal.showModal();
                                    });
                                }

                                // Setup an event listener for the close button.
                                if (closeBtn){
                                    closeBtn.addEventListener('click', function(e) {
                                        e.preventDefault();

                                        // Close the modal.
                                        modal.close();
                                    });
                                }

                            </script>
                        </div>
                    </td>
                    <td>{{ data[2]}}</td>
                    <td>{{ data[1] }}</td>
                    <td>{{ data[3] }}</td>
                </tr>
                </tbody>
            </table>
        </div>

我的app.js看起来像：

$scope.searchDataValues = [[]];

        var r = 1; //start from rows 3
        var c = 0; //start from col 5

        var rows = data.length;
        var cols = 4;
        for( var i=r; i<rows; i++ ) {
            $scope.searchDataValues.push( [] );
        }
        var i = 0;

       for (var k in data){
            if ( i <= rows) {
                $scope.searchDataValues[i].push(
                    data[k].id, data[k].primary_authors, data[k].primary_title, data[k].pub_year);
                i++;
            }
       }
       $scope.totalItems = $scope.searchDataValues.length;

这是我之前的排序功能：

$scope.sort = function(keyname){
        $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }

如果有人可以指向教程或样本，那将会很棒。

Answer 1

您应该将数据作为键值对（在对象中）而不是单个变量：

$scope.searchDataValues[i].push( {
    'id' : data[k].id,
    'primary_authors' : data[k].primary_authors, 
    'primary_title' : data[k].primary_title,
    'pub_year' : data[k].pub_year);
    }
)

如何在没有列标签的数组数组中实现排序和分页

1 个答案: