Question

这是我的问题伙伴，

我对AngularJS很陌生，我制作了一个简单的项目列表。我可以搜索这些项目，我甚至在那里加了一个分页。

这很好用，我想将我的列表放在我的控制器之外，作为json文件。

这就是我所做的：

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" > <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test angular</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/controllers.js"></script>
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    </head>
    <body >

      <section class="app" ng-app="myApp" data-scope="$scope = myApp" > 

         <div ng-controller="myCtrl" data-scope="$scope = myApp.myCtrl">
            <input type="text" ng-model="search" data-scope="$scope = myApp.myCtrl.items(repeater scope)">
            Recherche = {{ search }}
            <div class="item" ng-repeat="item in newItems | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize">
              {{ item.name }}
            </div>
             <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
              Previous
          </button>
          {{currentPage+1}}/{{numberOfPages()}}
          <button ng-disabled="currentPage >= items.length/pageSize - 1" ng-click="currentPage=currentPage+1">
              Next
          </button>
          </div>

      </section>



    </body>
</html>

注意：在我学习的过程中，数据范围属性只是帮助我了解当前范围

controllers.js

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

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

// configure the module myApp with MyCtrl controller.
myApp.controller('myCtrl', function($scope, $interval, $filter, $http){
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.numberOfPages=function(){
        return Math.ceil($scope.items.length/$scope.pageSize);                
    }
    $scope.$watch('search', function () {
        $scope.currentPage = 0;
        $scope.newItems = $filter('filter')($scope.items, $scope.search);
        $scope.numberOfPages=function(){
            return Math.ceil($scope.items.length/$scope.pageSize);             
        }
    });   
    $scope.newItems = $scope.items;
    $http.get('js/items.json') // go get my json file
       .then(function(res){
          $scope.items = res.data; // set this data to be my items             
        });


});

json加载很棒（在网络面板中，它没关系），但我想我使用的startFrom过滤器在JSconsole中出现了一些错误：

TypeError: Cannot call method 'slice' of undefined

我的假设是：过滤器试图切片现在没有定义的东西。就像在过滤器完成其工作后定义$ scope.items一样。

编辑：

自我声明$ scope.items = []后不再出现错误;正如VtoCorleone所说，但现在，存在一个真正的问题：列表的第一页没有出现，它只是空的。 但是分页有效。

我的建议：我为项目设置了两个属性（items，newItems），items是原始json，newItems是过滤后的结果。使用items，我可以保留所有项目，并在需要时恢复它们。

使用Angular检查器，在页面加载时，我看到items填充了我的JSON，但newItems为空。（是的，ng-repeat已启用newItems :)）为什么它是空的？

Answer 1

至于为什么页面没有显示：

你只需要关注'搜索'。因此，当项目从ajax回调更新时，您的numberOfPages仍然保持为0.一旦您开始搜索，请立即查看并更新您的numberOfPages。

您需要在ajax回调函数中包含页面更新。

$http.get('js/items.json') // go get my json file
   .then(function(res){
      $scope.items = res.data; // set this data to be my items
      $scope.numberOfPages=function(){
        return Math.ceil($scope.items.length/$scope.pageSize);             
   }             
});

Answer 2

我找到了。

myApp.controller('myCtrl', function($http, $scope, $interval, $filter){



    $scope.items = [];
     $http.get('js/items.json')
       .then(function(res){
          $scope.items = angular.fromJson(res.data);   
          $scope.newItems = angular.fromJson(res.data); // I set $scope.newItems directly in the Ajax response.
        });
    //$scope.newItems = $scope.items; // this doesn't work, don't know why.
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.numberOfPages=function(){
        return Math.ceil($scope.newItems.length/$scope.pageSize);                
    }
    $scope.$watch('search', function () {
        $scope.currentPage = 0;
        $scope.newItems = $filter('filter')($scope.items, $scope.search);
        $scope.numberOfPages=function(){
            return Math.ceil($scope.newItems.length/$scope.pageSize);             
        }
    });  
    $scope.$watch('pageSize', function () {
        $scope.currentPage = 0;
        $scope.numberOfPages=function(){
            return Math.ceil($scope.newItems.length/$scope.pageSize);             
        }
    });       

});

最后，我直接在Ajax响应中设置了$ scope.newItems。在页面加载时，newItems已经填充了所有元素。然后我更新了numberOfPages（）;更新newItems上的页数。

$scope.newItems = $scope.items;

如果有人可以告诉我为什么这行不能按预期工作（newItems在页面加载时为空），请告诉我：）

Answer 3

我有同样的错误，

只需在过滤器中添加一行：＆＃34;输入=输入|| ＆＃39;＆＃39 ;;＆＃34;

.filter('startFrom', function() {
    return function(input, start) {
        input = input || '';
        start = parseInt(start,10);
        return input.slice(start);
    }
});

在加载页面期间，会调用过滤器，但此时不会加载值＆＃34;输入＆＃34;未定义。

++

角度过滤器Ajax加载数据（JSON）

3 个答案: