применяя нумерацию страниц к таблице в угловых js, где map - это то, что я повторяю в ng-repeat - PullRequest
0 голосов
/ 26 апреля 2018

Я перебираю карту, где есть пара ключ-значение, и я не понимаю, как применить разбиение на страницы тех данных, где эти данные карты генерируются напрямую из базы данных. Я перебираю карту, где ключ и значение пара есть, и я не понимаю, как применить нумерацию тех данных, где эти данные карты генерируются непосредственно из базы данных.

<table>
            <thead></thead>

            <tbody>
                <tr>
                    <td><marquee>
                            <h3>
                                A tag is a keyword or label that categorizes your question with
                                other, similar questions. Using the right tags makes it easier
                                for others to find and answer your question.
                                </h4>
                        </marquee>
                        <hr></td>
                </tr>
                <tr ng-repeat="(key,value) in tagForm.data track by $index">

                    <td align="left">
                        <div ng-init='tagForm.getTag(key)'
                            class=" w3-container w3-card w3-white w3-margin w3-round "
                            style="padding-left: 40px; padding-right: 40px;">
                            <br>
                            <p ng-repeat="data2 in tagForm.message track by $index">
                                <a ng-click="tagForm.getAnswer(key)">Q. {{value}}</a>&nbsp;&nbsp;&nbsp;&nbsp;<span
                                    class="badge">{{data2}}</span> <br>
                            </p>
                            <ul ng-repeat="(key2,value2) in tagForm.ans track by $index">
                                <li><b ng-if="key==key2">Ans. {{value2}}</b></li>
                            </ul>
                            <div ng-init='tagForm.getUser(key)'>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Posted
                                    by:{{tagForm.user2[$index]}}</b>
                            </div>


                            &nbsp;&nbsp;&nbsp;
                            <button class="btn btn-default" id="{{$index}}"
                                ng-click="count1=count1+1" ng-init="count1=5+($index*3)-5">
                                Upvote <span class="badge">{{count1}}</span>
                            </button>
                            <button class="btn btn-default" id="{{$index}}"
                                ng-click="count=count+1" ng-init="count=1+($index*2)">
                                Downvote<span class="badge">{{count}}</span>
                            </button>

                            <button class="btn btn-default" ng-click="gotoanswer()">Answer
                                this question</button>
                            <br> <br />
                        </div> <br>
                    </td>

                    <td height=100px><br /></td>

                </tr>
            </tbody>
        </table>

1 Ответ

0 голосов
/ 26 апреля 2018

используйте следующую нумерацию страниц в вашем HTML-файле

<uib-pagination ng-show="isPaginate == false "
            total-items="totalItems" ng-model="currentPage"
            boundary-links="true" items-per-page="numPerPage"
            class="pagination-sm" ng-change="pageChanged()" max-size="5">
        </uib-pagination>

и затем инициализируйте переменную согласно требованию в угловом контроллере

$scope.totalItems = 80;//length of records
$scope.currentPage = 1;
$scope.numPerPage = 10;
var startpos = 0;

для динамической загрузки записей (загрузка записей в пакетном режиме, а не загрузка всего времени), см. Следующую функцию

$scope.pageChanged = function() {
    // if($scope.currentPage!=1)
    $scope.isCollapsed = false;
    $scope.isRCollapsed = false;
    $scope.page = ($scope.currentPage - 1) * $scope.numPerPage;
    callApi($scope.page);//get next set of 10 records
    console.log('Page changed to: ' + $scope.currentPage);
};
...