开发者问题收集

类型错误:无法读取未定义的属性“slice”

2014-07-29
26744

我使用此脚本进行页面分页,就像本教程中一样 http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html

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

一切都很顺利,除了我收到一个错误

TypeError: Cannot read property 'slice' of undefined
at k.<anonymous> (http://www.foo.com/43267ztX/default/:18:17)
at e (http://www.foo.com/43267ztX/default/js/angular.min.js:171:180)
at db.| (http://www.foo.com/43267ztX/default/js/angular.min.js:160:65)
at F.constant (http://www.foo.com/43267ztX/default/js/angular.min.js:170:82)
at db.| (http://www.foo.com/43267ztX/default/js/angular.min.js:160:70)
at F.constant (http://www.foo.com/43267ztX/default/js/angular.min.js:170:82)
at Object.$watch.p (http://www.foo.com/43267ztX/default/js/angular.min.js:107:159)
at k.$digest (http://www.foo.com/43267ztX/default/js/angular.min.js:109:78)
at k.$apply (http://www.foo.com/43267ztX/default/js/angular.min.js:112:173)
at h (http://www.foo.com/43267ztX/default/js/angular.min.js:72:300) </pre>
1个回答

尝试:

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

这是什么意思?

  1. 每个过滤器必须接受一个 输入 并返回一个 输出
  2. 每个过滤器都必须根据条件构建。这意味着,在示例中: 给定一个特定的开始,给我一个接受输入并产生输出切片(开始,10)的函数
  3. 这很像装饰器模式。
  4. 不相信我?阅读 官方文档 ,了解过滤器如何成为高阶函数(返回函数的函数 - 此函数成为标准工厂,并且生成的函数仅用于定义函数的目的)。

您的错误是什么?

  1. 在包装函数中(假设),您必须仅提供用于定义实际过滤器的函数的参数。您将使用此过滤器作为 {{ myArray|offset:3 }}}code>,并且只接收一个参数: (start) ,在本例中为 3。
  2. 包装函数将接受 恰好 一个参数(名称无关紧要)。

为了进一步说明这一点:(编辑中...)

让我们创建一个新的过滤器,一个比您的过滤器大写字母更多的过滤器:

app.filter('limit', function(start, count) {
    start = parseInt(start);
    count = parseInt(count);
    return function(input) {
        return input.slice(start, start + count);
    }
});

每个过滤器都是一种 工厂 (实际上:它就是一个工厂)。这个过滤器接受两个参数并产生实际的过滤器。实际的过滤器是一个接受参数并返回过滤值的函数。内部条件由我传递给包装函数的参数定义。

因此,当您像这样使用它时:

{{ myArray | limit:5:5 }}

您可以这样说:

  1. 获取参数 (5, 5)。
  2. 创建一个函数,该函数接受输入并在 (5, 10) 上对其进行切片,然后返回它。
  3. 将返回的函数应用于 myArray
Luis Masuelli
2014-07-29