Question

我正在使用angularjs，并且我的作用域包含一个列表（$ scope =工作区）。我想做的是在每个页面中显示5个元素。

也要在页面底部创建一个栏，该栏将帮助我将下一个5渲染到下一页

var SearchResultController = function ($scope, $http, $location, $window) {


    $scope.testVal;
    $scope.GetWorkSpace = function () {

        var jsonObj = {};

        jsonObj["searchText"] = $scope.testVal;


        var config = {
            params: jsonObj,
            headers: { 'Accept': 'application/json' }
        };


        $http.get("api/SearchResult/Search", config).then(function (response) {
            if (response.data != null) {

                $scope.workspace = response.data;

            }
            else
                alert("not found")
        })

    }
     $scope.GetWorkSpace();


}
SearchResultController.$inject = ['$scope', '$http', '$location', '$window'];

<div class="row">

    <div class="col-md-9">
        <div class="dashboard-list-box fl-wrap">
            <div class="dashboard-header fl-wrap">
                <h3>Indox</h3>
            </div>

            <!-- dashboard-list end-->
            <div class="dashboard-list" ng-repeat="ws in workspace">
                <div class="dashboard-message">

                    <div class="dashboard-listing-table-image" style="float:right">
                        <a href="listing-single.html"><img src="../../Images/1.jpg" alt=""></a>


                        <ul class="dashboard-listing-table-opt  fl-wrap">
                            <li><a onclick="window.location.reload()" href="/#/WorkSpace?id={{ws.ID}}" style="margin-left: 30px;">כניסה למתחם</a></li>
                        </ul>
                    </div>
                </div>
                <div class="dashboard-listing-table-text" style="   text-align:right;padding-right: 20px;">
                    <h4 text-align:right;padding-right: 20px;"><a href="listing-single.html">{{ws.Name}}</a></h4>
                    <div class="footer-contacts-widget fl-wrap">

                        <div class="listing-rating card-popup-rainingvis fl-wrap" data-starrating2="5">
                            <span>{{ws.Description}}</span>

                        </div>

                    </div>
                    <table style="float:right; margin-top: 10px">
                        <tr>
                            <td style="color:black;padding-left: 10px;">
                                <a class="enteremail" href="mailto:{{ws.Email}}" target="_self" style="color:black">{{ws.Email}} <i class="fa fa-envelope-o"></i></a>
                            </td>

                            <td style="color:black;padding-left: 10px;">
                                <a href="https://www.google.com/maps/place/{{ws.Address.City}},{{ws.Address.Street}}{{ws.Address.Number}}" target="_blank" style="color:black">{{ws.Address.City}},{{ws.Address.Street}} {{ws.Address.Number}} <i class="fa fa-map-marker"></i></a>
                            </td>

                            <td style="color:black;padding-left: 10px;">
                                <a style="color:black">{{ws.Phone}} <i class="fa fa-phone"></i></a>

                            </td>
                        </tr>
                    </table>


                </div>
            </div>

        </div>

        <!-- dashboard-list end-->
      <div class="pagination">
        <a href="#" class="prevposts-link"><i class="fa fa-caret-left"></i></a>
        <a href="#">1</a>
        <a href="#" class="current-page">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#" class="nextposts-link"><i class="fa fa-caret-right"></i></a>
    </div>
    </div>

    </div>

元素。最好的方法是什么？请帮助

Answer 1

有一个名为 ng-paginator 的软件包，它非常易于使用（但丑陋，可能需要CSS或类似引导程序的主题）。

安装： npm i --save ng-paginator

打包网站： ng-paginator

还有一个很好的示例，使用javascript中的逻辑在此网络中进行分页：

angularjs-pagination-example-with-logic-like-google

干杯！

AngularJS-将范围数据划分为页面

1 个答案: