Kamil Powroźnik Kamil Powroźnik - 1 month ago 15
AngularJS Question

Multiply filter in AngularJS app

I have a problem with filtering data in my angularJS app. There is code:

<p>
<span>Lokalizacja: </span>
<select ng-model="location" class="form-control">
<option value="" disabled selected>Wybierz lokalizacje...</option>
<option value="Łepkowskiego D">Łepkowskiego D</option>
</select>
</p>

<p>
<span>Liczba pokoi: {{rooms}}</span>
<input type="range" ng-model="rooms" min="1" max="5">
</p>

<p>
<span>Piętro: {{floor}}</span>
<select ng-model="floor" class="form-control">
<option value="" disabled selected>Wybierz piętro</option>
<option value="Parter">Parter</option>
<option value="I">Piętro I</option>
<option value="II">Piętro II</option>
<option value="III">Piętro III</option>
<option value="IV">Piętro IV</option>
<option value="V">Piętro V</option>
<option value="VI">Piętro VI</option>
</select>
</p>


Here is my ng-repeat:

<tr ng-repeat="flat in flats | filter: location | filter: floor | filter: rooms">
<td>{{flat.location}}</td>
<td>{{flat.floor}}</td>
<td>{{flat.surface}}</td>
<td>{{flat.rooms}}</td>
<td>{{flat.price}}</td>
</tr>


And here is example of data in controller:

{
"location":"Łepkowskiego D",
"floor":"I",
"surface":55.70,
"rooms":3,
"price":6200
},
{
"location":"Łepkowskiego D",
"floor":"I",
"surface":52.18,
"rooms":3,
"price":6300
},


My question is how to do a filter where in example i choose floor: I, rooms: 2 and in app will show all of records with first floor and 2 rooms, not like in this picture:

my problem

Best regards and sorry for my English.

Answer

Just use filter like this in your ng-repeat:

<tr ng-repeat="flat in flats | filter:{location:location, floor:floor, rooms:rooms}">
Comments