I use this script for page pagination like in this tutorial .html

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

Everything went fine, except that I got an error

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

I use this script for page pagination like in this tutorial http://fdietz.github.io/recipes-with-angular-js/mon-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);
    };
});

Everything went fine, except that I got an error

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

• javascript
• angularjs

• So if slice isn't a property of undefined, which of your variables must be undefined? Your answer is in the error message. – Mike Cluck Commented Jul 29, 2014 at 19:58
• show other codes... i got also error like that but the filter was not the reason.. try to review other codes you have.. but show other codes related to you filter will help.. – Datz Me Commented Aug 20, 2014 at 7:37
• 2 Actually, that error is prehensive. I am so sure that input is undefined. – choz Commented Jul 31, 2016 at 2:27
• I see no error. I use the jsfiddle on the site mentioned in the post. Can this be closed if it is not a problem ? – bhantol Commented Jul 10, 2017 at 21:00

1 Answer 1

Try:

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

What does this mean?

1. Each filter must take an input and return an output.
2. Each filter must be built from criteria. This means, in the example: given a certain start, give me a function which takes an input and produces an output slicing (start, 10).
3. It's much like the decorator pattern.
4. Don't believe me? Read the official doc to see how filters are high-order functions (functions that return functions - this functions bee criteria factories, and the resulting function is used only on the purpose of the defined function).

What were your errors?

1. In the wrapper function (let's say), you must only give parameters which will have use on defining the function which will be the actual filter. You will use this filter as{{ myArray|offset:3 }}, and only receive ONE parameter: (start) which will, in this case, 3.
2. The wrapped function will take exactly one parameter (the name does not matter).

To illustrate this even more: (editing...)

Let's make a new filter, one with more caps than yours for one parameter:

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

Each filter is kind of a factory (actually: it is a factory). This one takes two parameters and yields the actual filter. The actual filter is a function that takes a parameter and returns a filtered value. The inner criteria is defined by the parameters I passed to the wrapper function.

So when you use it like this:

{{ myArray | limit:5:5 }}

You say something like:

1. Take the arguments (5, 5).
2. Create a function which takes an input and slices it on (5, 10), and return it.
3. Apply that returned function to myArray.