Search code examples
angularjsangular-filters

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.


Solution

  • Just use filter like this in your ng-repeat:

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