Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to refresh the items from the on-list?

  • Hi guys,

    I don’t know if I missed look on how to do it. I already check the documentation and it says by using .refresh() should refresh the list but I got an error that refresh is not a function.

    Is there other way of refreshing the data from the on-list? I’m using on-list and lazy-repeat and I bind the data from the control.


  • Hi. The refresh method comes from the ons-lazy-repeat, it’s not a method of the ons-list. (also don’t forget the s)

    If you could provide us with some code (or codepen) where you can show us what you’re trying it would probably be helpful.

    By default a normal list will auto-refresh itself from angular’s ng-repeat directive. Here’s a demo to see it in action.

    Since ons-lazy-repeat is supposed to be an infinite list I would advise against actually changing the items inside it. If you want to change the items then it is better to use a normal list. (from the users perspective too - imagine you scrolled 1000 items down and then suddenly the list changes to something different)

    If I still failed to convince and you want to refresh the infinite list nonetheless then here’s how to do it:

    $scope.myDelegate.refresh(); // refreshes the list
    $scope.$apply(); // use this only if you're seeing `{{ item }}` or sth similar

    If I remember you were using angular 1, so this is how to do it there.
    The first line refreshes the list - it’s a method of the delegate which you provided.
    The second line should be avoided if possible. In general angular tries to automagically update everything - as long as you’re doing actions as a result of ng-click or something else which angular is aware of then you won’t need to do anything more. But if for some reason you are unable to properly inform angular then you can force it to update itself by calling $apply.

  • Thanks @IliaSky , these info will be a great help and exactly what I need.

    The reason I want to refresh the list is because I’m letting the user filter out the list of the items and the refresh will be triggered by the click event.