Pavel Fanko Pavel Fanko - 4 months ago 71
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">
Sorting:
</div>
<select ng-model="selectField" ng-change="chooseSorting(selectField)">
<option value="true">ascending</option>
<option value="false">descending</option>
</select>
</label>

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

<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)">
<h3>{{item.name}}</h3>
<p>{{item.properties[0]}}</p>
<p>{{item.properties[3]}}</p>
</a>
</ion-item>
</div>
</ion-content>
</ion-view>


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 ?

Answer

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>
</select>
  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.