Javascript 搜索期间的动态结果计数器

在这个代码片段中，您可以看到一个小的概述，它在几个表页上显示了一些示例数据。分页和其他一切都很好，但如果我在搜索中键入了一些内容，结果的计数会发生变化，但顶部的计数器保持不变。如果我限制搜索结果，它也应该动态地改变。例如，如果我输入“item_44”，它应该显示1-1/1，因为只有1个条目

如果有人知道如何解决这个问题，我会很高兴

这是一个有效的例子

var myApp=angular.module（'myApp'，[]）；
myApp.filter（'startFrom'，function（）{
返回功能（输入、启动）{
start=+start；//解析为int
返回input.slice（开始）；
}
});
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，function（）{}）；
函数MyCtrl（$scope）{
var vm=这个；
//vm.currentActive=sessionService.getState（）；
$scope.currentPage=0；
$scope.pageSize=10；
$scope.data=[]；
$scope.firstItem=0；
$scope.lastItem=$scope.firstItem+$scope.pageSize；
$scope.numberOfPages=函数（）{
返回Math.ceil（$scope.data.length/$scope.pageSize）；
}
对于（变量i=0；i<45；i++）{
$scope.data.push（“项目”+i）；
}
$scope.nextPage=函数（）{
如果（$scope.currentPage>=$scope.data.length/$scope.pageSize-1）{
}否则{
$scope.currentPage=$scope.currentPage+1；
$scope.firstItem=$scope.firstItem+$scope.pageSize；
如果（$scope.firstItem+$scope.pageSize>$scope.data.length）{
$scope.lastItem=$scope.data.length；
}否则{
$scope.lastItem=$scope.firstItem+$scope.pageSize；
}
}
}
$scope.prevPage=函数（）{
如果（$scope.currentPage==0）{
}否则{
$scope.currentPage=$scope.currentPage-1；
$scope.firstItem=$scope.firstItem-$scope.pageSize；
$scope.lastItem=$scope.firstItem+$scope.pageSize；
}
}
}

.name行{
宽度：100px；
}

跳过上一步
{{firstItem+1}}-{data.length}的{lastItem}}
跳过下一步


搜索
名称
信息
{{item}}

var myApp=angular.module（'myApp'，[]）；
myApp.filter（'startFrom'，function（）{
返回功能（输入、启动）{
start=+start；//解析为int
返回input.slice（开始）；
}
});
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，function（）{}）；
函数MyCtrl（$scope）{
var vm=这个；
//vm.currentActive=sessionService.getState（）；
$scope.currentPage=0；
$scope.pageSize=10；
$scope.data=[]；
$scope.firstItem=0；
$scope.lastItem=$scope.firstItem+$scope.pageSize；
$scope.numberOfPages=函数（）{
返回Math.ceil（$scope.data.length/$scope.pageSize）；
}
for（var i=0；i=$scope.data.length/$scope.pageSize-1）{
}
否则{
$scope.currentPage=$scope.currentPage+1；
$scope.firstItem=$scope.firstItem+$scope.pageSize；
如果（$scope.firstItem+$scope.pageSize>$scope.data.length）{
$scope.lastItem=$scope.data.length；
}
否则{
$scope.lastItem=$scope.firstItem+$scope.pageSize；
}
}
}
$scope.prevPage=函数（）{
如果（$scope.currentPage==0）{
}
否则{
$scope.currentPage=$scope.currentPage-1；
$scope.firstItem=$scope.firstItem-$scope.pageSize；
$scope.lastItem=$scope.firstItem+$scope.pageSize；
}
}
}

跳过上一步
{{firstItem+1}}-{data.length}的{griddata.length}
跳过下一步


搜索
名称
信息
{{item}}

试试这个，它很管用

HTML

跳过上一步
{{currentPage+1}}-{{numberOfPages（）}}von{{getDataLength（）}}
跳过下一步


跳过下一步
地位
名称
信息
检查圆
{{item}}

javascript

    var myApp = angular.module('myApp',[]);


myApp.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      return $filter('filter')($scope.data, $scope.q)

    }

        $scope.getDataLength = function () {
      var arr = [];
      arr = $filter('filter')($scope.data, $scope.q)
      return arr.length;
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }

     $scope.back = function(){

     if($scope.currentPage == 0){return}else{
    $scope.currentPage=$scope.currentPage-1;}
    }
    $scope.forward = function(){
    var val = $scope.numberOfPages();
    if(val == ($scope.currentPage+1)){
    alert('val');
    }
    else {
    $scope.currentPage+=1;}
    }

    for (var i=0; i<45; i++) {
        $scope.data.push("Item "+i);
    }
}]);


myApp.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，['$scope'，'$filter'，函数（$scope，$filter）{
$scope.currentPage=0；
$scope.pageSize=10；
$scope.data=[]；
$scope.q=''；
$scope.getData=函数（）{
返回$filter（'filter'）（$scope.data，$scope.q）
}
$scope.getDataLength=函数（）{
var-arr=[]；
arr=$filter（'filter'）（$scope.data，$scope.q）
返回arr.length；
}
$scope.numberOfPages=函数（）{
返回Math.ceil（$scope.getData（）.length/$scope.pageSize）；
}
$scope.back=函数（）{
如果（$scope.currentPage==0）{return}else{
$scope.currentPage=$scope.currentPage-1；}
}
$scope.forward=函数（）{
var val=$scope.numberOfPages（）；
如果（val==（$scope.currentPage+1））{
警报（“val”）；
}
否则{
$scope.currentPage+=1；}
}
对于（var i=0；对于我来说，计数器不会更改。现在，请根据您的搜索检查代码计数器上方的计数器是否更改。计数器工作正常，但带有导航“向前翻页”和“向后翻页”的分页不起作用。下面是上的工作片段
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div ng-controller="MyCtrl">

  <div class="view-navigation">
    <span ng-disabled="currentPage == 0" ng-click="back()" id="hoverfinger"><i class="material-icons">skip_previous</i></span>    
    <span class="counter">{{currentPage+1}} - {{numberOfPages()}} von {{getDataLength()}}</span>    
    <span ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="forward()" id="hoverfinger"><i class="material-icons" >skip_next</i></span>
  </div>

   <br>
   <span ng-click="nextPage()" id="hoverfinger"><i class="material-icons" >skip_next</i></span><input type="text" ng-model="q" placeholder="search..."/>

  <table border="1">
    <tr>
      <th>Status</th>
      <th>Name</th>
      <th>Info</th>
    </tr>
    <tr ng-repeat="item in s=( data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize)">
      <td><span><i class="material-icons" style="color: #8AC65B">check_circle</i></span></td>
      <td>{{item}}</td>
      <td><a href="#">more info...</a></td>          
    </tr>
  </table>
</div>

    var myApp = angular.module('myApp',[]);


myApp.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      return $filter('filter')($scope.data, $scope.q)

    }

        $scope.getDataLength = function () {
      var arr = [];
      arr = $filter('filter')($scope.data, $scope.q)
      return arr.length;
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }

     $scope.back = function(){

     if($scope.currentPage == 0){return}else{
    $scope.currentPage=$scope.currentPage-1;}
    }
    $scope.forward = function(){
    var val = $scope.numberOfPages();
    if(val == ($scope.currentPage+1)){
    alert('val');
    }
    else {
    $scope.currentPage+=1;}
    }

    for (var i=0; i<45; i++) {
        $scope.data.push("Item "+i);
    }
}]);


myApp.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});