【问题标题】:AngularJS pagination and Cannot read property 'slice' of undefinedAngularJS分页和无法读取未定义的属性“切片”
【发布时间】:2016-02-08 15:27:51
【问题描述】:

我遇到了问题。 请帮我看看有什么问题。

这是我的代码:

(function () {

    var app = angular.module('store', ['ui.bootstrap']);

    app.controller('StoreController', function ($scope, $http) {
        $scope.pageSize = 20;
        $scope.currentPage = 1;
        $http.get("../scripts/products.php").success(function (data) {
            $scope.products = data;
        });

    }).filter('startFrom', function () {
        return function (data, start) {
            return data.slice(start);
        };
    });
})();

还有 HTML:

<div class="col-md-2 product " ng-hide="product.soldOut" ng-repeat="product in products| orderBy:sortorder | filter: searchBox | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize">
    <img src="../products/{{product.image}}">
    <h4>{{product.nazwa}}
        <br>
        <br>
    </h4>
    <strong>{{product.cena| currency:"PLN "}}</strong>

    <div class="colored">{{product.usagee}}</div>
    <div class="buttons">
        <a href="/product/{{product.id}}" class="btn btn-default btn-sm" style="">Szczegóły</a>
        <a href="/product/{{product.id}}" class="btn btn-success btn-sm" ng-show="product.dostepny">Kup</a>
    </div>
</div>
<div class="col-md-12">
    <uib-pagination class="pagination-sm" previous-text="Poprzednia" next-text="Następna" total-items='products.length' ng-model='currentPage' items-per-page='pageSize'></uib-pagination>
</div>

我在谷歌和堆栈中搜索,但找不到任何好的解决方案。

【问题讨论】:

  • 过滤器在从服务器返回数据之前被调用。
  • 不,不是重复的……
  • 产品好像还没有定义。在过滤器中添加已定义数据的检查。另一种方法是将产品初始化为控制器中的空数组
  • @JacekJot 它不是重复的,发生的情况是在调用过滤器之前尚未设置产品变量。您需要在过滤器中添加一个 null-guard。
  • 如果我把console.log(data);在这个过滤器中,我得到了一个数组。

标签: javascript angularjs pagination slice


【解决方案1】:

在服务器返回其数据之前,您必须检查 $scope.products 是否已定义,它似乎未定义。

您可以在过滤器中设置检查以定义要定义的数据或将控制器中的产品初始化为空数组。

【讨论】:

  • 它正在工作 :) 我添加 if(data != null) { return data.slice(start); }
猜你喜欢
  • 2016-05-07
  • 2017-06-17
  • 1970-01-01
  • 1970-01-01
  • 2019-12-26
  • 1970-01-01
  • 1970-01-01
  • 2020-06-27
  • 2014-11-01
相关资源
最近更新 更多