Pavel Fanko Pavel Fanko - 10 months ago 105
AngularJS Question

How to refresh collection-repeat list when the value is changed

I have a collection-repeat element with lots of data on the view and I want to change its sorting when I select an option from the element. Although it assigns the correct value to the $scope.isAscending variable, collection-repeat list is not updating.

<ion-view cache-view="false">
<ion-content on-scroll="onContentScroll()">
<div class="list">
<label class="item item-input item-select item-light">
<div class="input-label">
<select ng-model="selectField" ng-change="chooseSorting(selectField)">
<option value="true">ascending</option>
<option value="false">descending</option>

<label class="item item-input">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="q">

<div collection-repeat="item in items | orderBy: item.year: !isAscending | itemFilter: q | groupByProperty" divider-collection-repeat>
<ion-item class="item item-thumbnail-left item-button-right">
<a class="item-thumbnail-left" ng-click="openModal(item)">

I tried to call $scope.$apply(function(){$scope.isAscending = value}) after the option was specified, It updates the scope value, but it doesn't refresh the repeating list, $state.go() doesn't work either.
Is there a way to refresh collection-repeat list ?


If I understood your question well, you want to filter the year based on select changes, right?

If so, first you don't need to use ng-change and second orderBy filter just needs the property (in your case year).

  1. Change your select to:
<select ng-model="selectField">
   <option value="">ascending</option>
   <option value="false">descending</option>
  1. Change your repeat to:
<div collection-repeat="item in items | orderBy: year: selectField | itemFilter: q  | groupByProperty" divider-collection-repeat>

Take a look on docs of orderBy filter.