Question

已经开始使用mvc中的Angular.js编码，我有两个问题

- 第一个问题是搜索正在计算信息json数据中的条目数，但不是表格被过滤后显示的数字引发搜索，即如果有结果，则显示在病房后显示的内容目前显示的一个结果是标签应该算一个。

- 如果有人知道怎么做分页，非常感谢任何帮助。

   <script>
            var MyApp = angular.module('MyApp', []);
            MyApp.controller('MyAppCtrl', function ($scope) {
                $scope.Info = [
                  { "date":"23/09/2014","name": "john", "detail": "sssss" },
                  { "date": "27/09/2014", "name": "mary", "detail": "gggggg"  }


                ];


        </script>
        <div class="container" ng-app="MyApp">
            <div class="row" style="padding-top: 60px">
                <div class="panel panel-warning">
                    <div class="panel-heading">Home

                    </div>
                    <div class="panel-body">

                        @*  left *@
                        <div class="col-md-4">
                            <div class="">

                                <div class="butLay">
                                    @Html.ActionLink("Reminders", "Reminders", null, new { @class = "btn btn-warning btn-md" })
                                </div>
                            </div>
                            <div class="butLay">



                                @Html.ActionLink("Expected customer", "Expectedcustomer", null, new { @class = "btn btn-info btn-md" })
                            </div>

                        </div>


                        @*  Right side*@
                        <div class="pr col-md-6" ng-controller="MyAppCtrl">
                            Search:<input ng-model="query" type="text" />
                            <span class="label label-info">{{Info.length}} </span>
                            <table class="table table-striped table-hover ">
                                <thead>
                                    <tr>
                                        <th><a href="" ng-click="sortField = 'date'; reverse = !reverse">Date</a></th>
                                        <th><a href="" ng-click="sortField = 'name'; reverse = !reverse">Name</a></th>
                                        <th><a href="" ng-click="sortField = 'detail'; reverse = !reverse">detail</a></th>
                                    </tr>
                                </thead>
                                <tbody>


                                    <tr ng-repeat="custom in Info| filter:query | orderBy:sortField:reverse">
                                        <td>{{custom.date}}</td>
                                        <td>{{custom.name}}</td>
                                        <td>{{custom.detail}}</td>              
                                    </tr>                   
                                </tbody>
                            </table>
                            @*<ul class="pagination pagination-sm">
                                <li class="disabled"><a href="#">«</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">»</a></li>
                            @*</ul>*@


                        </div>

                    </div>
                    <table class="table table-condensed table-hover table-striped"></table>
                </div>
                @* of panel *@
            </div>
            @*of row*@
        </div>
        @* of container *@

Answer 1

您可以使用另一个模型来保存结果页面。所以，例如。你总共有55个信息对象，并且说你想要页面大小（一次显示的表行大小）是20，那么将有3个页面，其中包含20,20和5个条目。在模板中迭代的模型应该是持有分页对象的模型。

var PAGESIZE = 20;
....
....
var startIndex, stopIndex = 0, stopIndex + PAGESIZE;
$scope.pagedInfo = [];

$scope.nextPage = function(start, stop) {
    $scope.startIndex += PAGESIZE;
    $scope.stopIndex += PAGESIZE;
    $scope.pagedInfo = $scope.Info.slice($scope.startIndex, $scope.stopIndex);
}

然后在模板中，您可以迭代此pagedInfo而不是Info。您将有一些按钮或链接或任何其他适当的UI元素转到下一页/上一页。添加将触发函数nextPage的click（或任何其他适当的evet）处理程序。您也可以为上一页创建类似的功能。

角度搜索计数器和分页

1 个答案: