Question

除了两件事之外，几乎所有事情都很有效

代码

＆＃13;

var app = angular.module("MyApp", []);

app.filter('offset', function() {
  return function(input, start) {
    start = parseInt(start, 10);
    return input.slice(start);
  };
});

app.controller("MyControler", function($scope, $http, $filter) {
      $http.get("http://127.0.0.1:8000/cars/?format=json").
        success(function(data) {
              $scope.list = data;
          });

  $scope.itemsPerPage = 1;
  $scope.currentPage = 0;
  $scope.items = [];

  for (var i=0; i<50; i++) {
    $scope.items.push({ id: i, name: "name "+ i, description: "description " + i });
  }

  $scope.range = function() {
    var rangeSize = 3;
    var ret = [];
    var start;

    start = $scope.currentPage;
    if ( start > $scope.pageCount()-rangeSize ) {
      start = $scope.pageCount()-rangeSize+1;
    }

    for (var i=start; i<start+rangeSize; i++) {
      ret.push(i);
    }
    return ret;
  };

  $scope.prevPage = function() {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
    }
  };

  $scope.prevPageDisabled = function() {
    return $scope.currentPage === 0 ? "disabled" : "";
  };

  $scope.pageCount = function() {
    return Math.ceil($scope.filtered.length/ $scope.itemsPerPage)-1;
  };

  $scope.nextPage = function() {
    if ($scope.currentPage < $scope.pageCount()) {
      $scope.currentPage++;
    }
  };

  $scope.nextPageDisabled = function() {
    return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
  };

  $scope.setPage = function(n) {
    $scope.currentPage = n;
  };


  var filterBy = $filter('filter');
  $scope.$watch('search', function (newValue) { $scope.filtered = filterBy($scope.list, newValue); }, true);

});

＆＃13;

<!DOCTYPE html>
        {% load staticfiles %}
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>



</head>
<body>

{% verbatim %}

  <div ng-app="MyApp" ng-controller="MyControler">
    <table class="table table-striped">
      <thead>
            <tr>
        <th><input ng-model="search.name" ></th>
        <th><input ng-model="search.years"></th>
        <th><input ng-model="search.owners"></th>
        <th><input ng-model="search.accidents"></th>
        <th><input ng-model="search.description"></th>
    </tr>
        <tr>

          <th>Name</th>
              <th>Years</th>
          <th>Owners</th>
              <th>Accidents</th>
            <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="cars in filtered| offset:currentPage*itemsPerPage | limitTo: itemsPerPage">

          <td>{{cars.name}}</td>
          <td>{{cars.years}}</td>

          <td>{{cars.owners}}</td>
          <td>{{cars.accidents}}</td>

          <td>{{cars.description}}</td>

        </tr>
      </tbody>
      <tfoot>
        <td colspan="3">
          <div class="pagination">
            <ul>
              <li ng-class="prevPageDisabled()">
                <a href ng-click="prevPage()">« Prev</a>
              </li>
              <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                <a href="#">{{n+1}}</a>
              </li>
              <li ng-class="nextPageDisabled()">
                <a href ng-click="nextPage()">Next »</a>
              </li>
            </ul>
          </div>
        </td>
      </tfoot>
    </table>
  </div>







{% endverbatim %}
</body>

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <script src="{% static 'js/app2.js' %}"></script>
</html>

＆＃13;

我的对象只有在我开始输入过滤器字段时才会显示，因为我看到分页后主动更新，然后发生了奇怪的事情，分页显示的页面还有缺点？

所以我想在没有开始输入过滤器的情况下显示已经显示的项目，并使这些缺点消失。

谢谢;）

Answer 1

var app=angular.module('MyApp', []);

app.controller("MyControler", function($scope, $http, $filter) {
      $http.get("http://127.0.0.1:8000/cars/?format=json").
        success(function(data) {
              $scope.list = data;
          });
    $scope.currentPage = 0;
    $scope.pageSize = 1;


    $scope.numberOfPages=function(){
        var myFilteredData = $filter('filter')($scope.list, $scope.search);
        return Math.ceil(myFilteredData.length/$scope.pageSize);
    };

});


app.filter("offset", function() {
    return function(input, start) {
        start = +start;
        return input.slice(start);
    };
});

<!DOCTYPE html>
        {% load staticfiles %}
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>



</head>
<body>

{% verbatim %}

  <div ng-app="MyApp" ng-controller="MyControler">

        <table>
            <tr>
        <th><input type="text" ng-model="search.name" class="form-control input-sm" placeholder="SEARCH" ></th>
        <th><input type="text" ng-model="search.years" class="form-control input-sm" placeholder="SEARCH"></th>
        <th><input type="text" ng-model="search.owners" class="form-control input-sm" placeholder="SEARCH"></th>
        <th><input type="text" ng-model="search.accidents" class="form-control input-sm" placeholder="SEARCH"></th>
        <th><input type="text" ng-model="search.description" class="form-control input-sm" placeholder="SEARCH"></th>
    </tr>
        <tr>

          <th>Name</th>
              <th>Years</th>
          <th>Owners</th>
              <th>Accidents</th>
            <th>Description</th>
        </tr>

        <tr ng-repeat="cars in list | filter:search|offset:currentPage*pageSize | limitTo:pageSize">

                    <td>{{cars.name}}</td>
          <td>{{cars.years}}</td>

          <td>{{cars.owners}}</td>
          <td>{{cars.accidents}}</td>

          <td>{{cars.description}}</td>

        </tr>
      </table>


    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    
    {{currentPage+1}}/{{numberOfPages()}}
    <button ng-disabled="(currentPage + 1) == numberOfPages()" ng-click="currentPage=currentPage+1">
        Next
    </button>

  </div>







{% endverbatim %}
</body>

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <script src="{% static 'js/app2.js' %}"></script>
</html>

解决了

只有在输入后才显示项目？角度js

1 个答案: