Filtering and sorting with collection-repeat

LouisR · September 7, 2015, 8:37am

Hi

I have a long list in my app, using collection-repeat for performance reasons.

Can someone point me to how to create filtering and sorting fields ?

For now, I coded those two filters using ‘filter’ in collection-repeat, as below, but it doesn’t work. And I would like to be able to sort the list by name or by other field if possible.

   <div id="ddddd" class="row">
   	<div class="col">
   		<label class="item item-input item-select button-block">
   			<div class="input-label">
   				Select a brand
   			</div>
   			<select id="chosenbrand" ng-options="item.brand for item in prodataSelect | unique:'brand' | orderBy:'brand'" ng-model="search.brand"></select>
   		</label>
   	</div>
   	<div class="col">
   		<label class="item item-input item-select button-block">
   			<div class="input-label">
   				Select a pro
   			</div>
   			<select id="chosenpro" ng-options="item.name for item in prodataSelect | unique:'name' | orderBy:'name'" ng-model="search.name"></select>
   		</label>
   	</div>
   </div>

   <div class="sortButtons">
   	<i class="icon ion-android-funnel"></i>
   	<label class="checkbox sortButton" >
   		<input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="brand" ng-false-value="model" ></input>
   		Brand
   	</label>
   	<label class="checkbox sortButton" >
   		<input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="name" ng-false-value="model"></input>
   		Pro
   	</label>
   	<label class="checkbox sortButton" >
   		<input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="gender" ng-false-value="model"></input>
   		Gender
   	</label>
   	<label class="checkbox sortButton" >
   		<input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="fun" ng-false-value="model"></input>
   		Board type
   	</label>
   </div>

   <ion-item collection-repeat="item in prodataSelect | orderBy:'model'| filter:search" collection-item-height="75">
   <a class="optionfuninit" href="#" data-proid="{{item.id}}" ng-click="launchCompute(item.id)">
   	<img class="imageoptionsbrand" ng-src="{{ imagesUrls[(item.brand | lowercase | nospace)+'.png'] }}"] />
   	<div class="listviewTrophy">
   		<img class="icon ion-home"></img>
   		<div class="winningboardtext">Winning Board</div>
   	</div>
   	<div class="listviewtexts">
   		<span class="listviewtextsmodel">{{item.model}}</span> - <span class="listviewtextspro" data-i18n="computepage.15">as surfed by</span> 
   		<span class="listviewtextspro">{{item.name}}</span>
   	</div>
   	<div class="imagebox rotate90rightCenter">
   		<img class="imageoptionsmodel " ng-src={{imagesUrls[item.imageName]}} />
   	</div>
   </a>
</ion-item>

and prodataSelect is a Json array that is retrieved from a server and each line has this form :

brand: "John Carper"
fun: "0"
gender: "male"
id: 0
imageName: "SD360.jpg"
length: "6'0"
model: "SD3 6'0"
name: "Shane Dorian"
pertinence: "5"
photocredits: "john carper"
size: "5'9"
thick: "2''1/8"
volume: "24"
weight: "72.73"
width: "18''1/4"
winning: "win0"
year: "0"

LouisR · September 14, 2015, 8:30am

Hi ionic team, can you please give me a hint on this ?
Thanks

JKnorr · September 14, 2015, 8:43am

Can you provide informations about prodataSelect? If it is an Object you have to convert it into an array to make it work with the orderBy filter.

LouisR · September 14, 2015, 7:13pm

Hi @JKnorr, thanks for your help, I edited the question so you can see the form of the array.

LouisR · September 16, 2015, 7:04am

@Jknorr, I read in other threads that the orderBy filter doesn’t work with collection-repeat. Is it still the case ?

JKnorr · September 16, 2015, 12:00pm

Well, i don’t know if this is still the case. If so, maybe you could to the ordering/filtering in the controller by injecting $filter and then call it programmatically. What was the solution in the other thread?

LouisR · September 16, 2015, 12:43pm

ok but can you help me on how to achieve this ?

No solution was clear for me in the other thread, except letting go of collection-repeat, which I can’t because my list is long.

LouisR · September 17, 2015, 8:55am

I only found the solution for the sorting feature

— in the .html view :

   Sort by
		    <label class="checkbox sortButton" >
		       <input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="brand" ng-false-value="model" ></input>
			  brand
		    </label>
		    <label class="checkbox sortButton" >
		       <input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="name" ng-false-value="model"></input>
			  pro
		    </label>

<ion-item collection-repeat="item in prodataSelect | orderBy:sort | filter:search" collection-item-height="75">
    </ion-item>

but I can’t figure out how to code the “filter” feature, can someone help please ?

LouisR · October 16, 2015, 8:05am

Here is my solution to filtering and sorting the collection-repeat list:

Sorting:

                  <label class="checkbox sortButton" >
		      <input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="brand" ng-false-value="model" ></input>
			  Brand
		    </label>
		    <label class="checkbox sortButton" >
		      <input type="checkbox" class="sortButton" ng-model="sort" ng-true-value="name" ng-false-value="model"></input>
			  Pro
		    </label>

Filtering:

             <div id="ddddd" class="row">
			<div class="col">
				<label class="item item-input item-select button-block">
				    <div class="input-label">
				      Brands:
				    </div>
				    <select id="chosenbrand" ng-options="item.brand for item in prodataSelect | unique:'brand' | orderBy:'brand'" ng-model="selectBrand">
				    	<option value="" ng-selected="selected">All</option>
				    </select>
				</label>
			</div>
			<div class="col">
				<label class="item item-input item-select button-block">
				    <div class="input-label">
				      Pros:
				    </div>
				    <select id="chosenpro" ng-options="item.name as item.name for item in prodataSelect | filter:selectBrand.brand | unique:'name' | orderBy:'name'" ng-model="selectName">
				    	<option value="" ng-selected="selected">All</option>
      					<!-- <option ng-repeat="item in prodataSelect | unique:'name' | orderBy:'name'">{{item.name}}</option> -->
				    </select>
				</label>
			</div>
    	</div>

Resetting:

 <div id="resetbutton" ng-click="selectBrand='0'; selectName='0'; search.fun=''; sort=''">
	<!-- <div>Show all boards:</div> -->
	<i class="icon ion-ios-reload"></i>
</div>

The collection-repeat list:

<ion-item collection-repeat="item in prodataSelect | orderBy:sort | filter:search | filter: selectBrand.brand | filter: selectName" collection-item-height="75">