类型错误:无法读取未定义的属性“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);
};
});
这是什么意思?
-
每个过滤器必须接受一个
输入
并返回一个输出
。 - 每个过滤器都必须根据条件构建。这意味着,在示例中: 给定一个特定的开始,给我一个接受输入并产生输出切片(开始,10)的函数 。
- 这很像装饰器模式。
- 不相信我?阅读 官方文档 ,了解过滤器如何成为高阶函数(返回函数的函数 - 此函数成为标准工厂,并且生成的函数仅用于定义函数的目的)。
您的错误是什么?
-
在包装函数中(假设),您必须仅提供用于定义实际过滤器的函数的参数。您将使用此过滤器作为
{{ myArray|offset:3 }}}code>,并且只接收一个参数:
(start)
,在本例中为 3。 - 包装函数将接受 恰好 一个参数(名称无关紧要)。
为了进一步说明这一点:(编辑中...)
让我们创建一个新的过滤器,一个比您的过滤器大写字母更多的过滤器:
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 }}
您可以这样说:
- 获取参数 (5, 5)。
- 创建一个函数,该函数接受输入并在 (5, 10) 上对其进行切片,然后返回它。
-
将返回的函数应用于
myArray
。
Luis Masuelli
2014-07-29