error with an angularjs filter

Question

Based on this jsfiddle : http://jsfiddle.net/2ZzZB/56/

i add the filter solution for my app : http://www.monde-du-rat.fr/zombieReport/popup.html#/ratousearch (ctrl : http://www.monde-du-rat.fr/zombieReport/resources/js/controllers/RatousearchCtrl.js )

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

Look console, error is getting at the started :

TypeError: undefined is not a function
    at http://www.monde-du-rat.fr/zombieReport/resources/js/baseChrome.js:368:22
    at http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:180:297
    at B.| (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:169:248)
    at B.constant (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:179:161)
    at B.| (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:169:253)
    at B.constant (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:179:161)
    at Object.c (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:101:146)
    at m.$digest (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:114:386)
    at m.$apply (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:118:12)
    at k (http://www.monde-du-rat.fr/zombieReport/resources/libs/angularjs/angular-1.3.0-rc.0/angular.min.js:76:374)

The line is

return input.slice(start);

what's wrong ? i didn't see error in the jsfiddle example

HTML :

        <div id="results" ng-show="successLordZR">
            <p class="myTitle">{{ 'TRS_CTRL3_TEXT1' | translate }} :</p>
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="post in posts | startFrom:currentPage*pageSize | limitTo:pageSize">
                    <div class="myClearfix">
                    <p style="float: left;"><span ng-class="{'girl' : post.sex == 'F', 'boy' : post.sex == 'M'}">#</span>&nbsp; {{post.prefixe}} {{post.name}} ({{post.idLord}})</p>
                    <p style="float: right;"><a href="http://lord-rat.org/rats/rat_details.php?id={{post.id}}" title="lien lord" ng-click="createTab('http://lord-rat.org/rats/rat_details.php?id=' + post.id, $event);"><i class="fa fa-link"></i>&nbsp;&nbsp;fiche</a></p>
                    </div>
                </li>
            </ul>
            <div id="pagination">
                <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"><i class="fa fa-arrow-circle-o-left"></i>&nbsp;&nbsp;{{ 'TRS_CTRL3_PREV' | translate }}&nbsp;</button>
                <span>&nbsp;&nbsp;&nbsp;{{currentPage+1}}/{{numberOfPages()}}&nbsp;&nbsp;&nbsp;</span>
                <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage >= posts.length/pageSize - 1" ng-click="currentPage=currentPage+1">&nbsp;{{ 'TRS_CTRL3_NEXT' | translate }}&nbsp;&nbsp;<i class="fa fa-arrow-circle-o-right"></i></button>
            </div>
        </div>

Data json example from laravel : http://www.monde-du-rat.fr/lordrest/public/posts_jsonforced

EDIT 2 , filter in controller:

            // populate scope
            $scope.posts = response;
            $scope.posts = $filter('startFrom')($scope.currentPage*$scope.pageSize);

filter is here : http://www.monde-du-rat.fr/zombieReport/resources/js/filtersZR.js

Dapeng Li · Accepted Answer · 2014-09-05 19:43:39Z

1

Seems the posts model in scope comes from RatousearchCtrl? In that controller the scope.posts was initially set to be an empty object and never updated.

That seems to be the reason why post as in ng-repeat 'post in posts' is undefined, which is the value got passed to the startFrom filter.

Can you re-check how posts are supposed to be loaded?

answered Sep 5, 2014 at 19:43

Dapeng Li

3,6721 gold badge26 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zelocalhost Over a year ago

You're right, i have the error where is no data to populate posts, i update posts data with var myQuery = newData.query(); Is there a tip for telling filter be quiet where is no data or there is a mistake of my current code ?

zelocalhost Over a year ago

I edited my question with new code, i try to use filter directly in controller, for control it. you can try "ar" in search input for see error is always here via console

Dapeng Li Over a year ago

@JoDiii For the first question: I would add code checking for invalid input before processing when there is no data; and I would use unit test to minimize the latter. For the second question, you will need to pass input value to the filter function in controller, try changing the line to $scope.posts = $filter('startFrom')($scope.posts, $scope.currentPage*$scope.pageSize);

Mathew Berg · Accepted Answer · 2014-09-05 15:55:37Z

1

Input might not exist at that exact moment, just change your code to this:

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return (typeof input == 'string') ? input.slice(start) : "";
    }
});

answered Sep 5, 2014 at 15:55

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

4 Comments

Mathew Berg Over a year ago

Try my edit, i'm not sure what input is at that time, but you might have to check if it's a string.

zelocalhost Over a year ago

There is no more error but my data is not displayed :/

Mathew Berg Over a year ago

Then your input is empty, please provide the rest of your html, along with how you're getting the input.

Mathew Berg Over a year ago

If you remove the startFrom filter, does data show up?

Collectives™ on Stack Overflow

error with an angularjs filter

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related