Angular 过滤器 Ajax 加载的数据 (JSON)答案

【问题标题】：Angular filter Ajax loaded data (JSON)Angular 过滤器 Ajax 加载的数据 (JSON)
【发布时间】：2014-03-06 17:51:21
【问题描述】：

这是我的问题伙计们，

我是 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 上 :)）为什么是空的？

【问题讨论】：

您可以在第一次创建控制器时设置 $scope.items = [] 来设置 currentPage 和 pageSize。那么你将永远不会引用未定义的。
没有更多错误，谢谢，但真正的问题仍然存在：在页面加载时，它应该显示分页的第一页（在我尝试将数据放入外部 json 文件），但它没有，我必须开始输入搜索模型以使某些内容出现......
我能想到的唯一一件事是你可能在加载json数据后必须使用$compile。
最糟糕的是：现在我的 json 是一个字符串，所以 ng-repeat 不再有效。
用 angular.fromJson(res.data) 反序列化

标签： javascript ajax json angularjs

【解决方案1】：

至于为什么页面不显示：

“搜索”上只有 $watch。因此，当从 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);             
   }             
});

【讨论】：

还是一样：我忘了提一件事，页面的更新在页面加载时起作用，但项目没有显示。

【解决方案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 在页面加载时为空），请告诉我:)

【讨论】：

【解决方案3】：

我有同样的错误，

只需在过滤器中添加一行：“input = input || '';”

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

在页面加载过程中，过滤器被调用，但此时未加载值“输入”未定义。

【讨论】：