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

Question

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

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

Here是工作示例。

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

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  var vm = this;
  //vm.currentActive = sessionService.getState();



  $scope.currentPage = 0;
  $scope.pageSize = 10;
  $scope.data = [];
  $scope.firstItem = 0;
  $scope.lastItem = $scope.firstItem + $scope.pageSize;
  $scope.numberOfPages = function() {
    return Math.ceil($scope.data.length / $scope.pageSize);
  }
  for (var i = 0; i < 45; i++) {
    $scope.data.push("Item " + i);
  }

  $scope.nextPage = function() {

    if ($scope.currentPage >= $scope.data.length / $scope.pageSize - 1) {

    } else {
      $scope.currentPage = $scope.currentPage + 1;
      $scope.firstItem = $scope.firstItem + $scope.pageSize;



      if ($scope.firstItem + $scope.pageSize > $scope.data.length) {
        $scope.lastItem = $scope.data.length;
      } else {
        $scope.lastItem = $scope.firstItem + $scope.pageSize;
      }


    }

  }

  $scope.prevPage = function() {

    if ($scope.currentPage === 0) {

    } else {
      $scope.currentPage = $scope.currentPage - 1;
      $scope.firstItem = $scope.firstItem - $scope.pageSize;
      $scope.lastItem = $scope.firstItem + $scope.pageSize;
    }
  }



}

.name-row {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div ng-controller="MyCtrl" class="wrapper">

  <div class="view-navigation">
    <span ng-click="prevPage()" id="hoverfinger"><i class="material-icons">skip_previous</i></span> 
    <span class="counter">{{firstItem +1}} - {{lastItem}} of {{data.length}}</span>	
    <span ng-click="nextPage()" id="hoverfinger"><i class="material-icons" >skip_next</i></span>
  </div>

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

  <table border="1">
    <tr>
      <th class="name-row">Name</th>
      <th class="info-row">Info</th>
    </tr>
    <tr ng-repeat="item in data | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize">
      <td>{{item}}</td>
      <td><a href="#">more info...</a>
      </td>
    </tr>
  </table>
</div>

不知何故，该代码段在 StackOverflow 网站中不起作用。

Answer 1

试试这个，它有效。

HTML

    <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>

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);
    }
});