AngularJS, filtered one sentence by multiples filters

Question

Yo everyone,

I've got a little blocking on a work with AngularJS. I want to filter one sentence with two differents filters based on <select> <option>

Theme 1:

<select size="2" multiple="multiple" ng-model="selectedValue">
    <option value="value1">value1.1</option>
    <option value="value1">value1.2</option>
    <option value="value1">value1.3</option>
</select>

Theme 2:

<select size="2" multiple="multiple" ng-model="selectedValue">
    <option value="value1">value2.1</option>
    <option value="value1">value2.2</option>
    <option value="value1">value2.3</option>
</select>

And here you can see my ng:repeat

<table ng-init="allValue = <?php echo htmlspecialchars(json_encode($table)); ?>;">
    <tr ng-repeat="value in allValue | filterMultiple:{valueCheck:selectedValue}">
        <td>
            <font class="title_recette">{{value.name}}</font>
            <br>
        {{value.valueCheck}}
        {{value.valueTime}}
   </td>
</tr>

During my search, I found this link : How to filter multiple values (OR operation) in angularJS which explain how filterMultiple works but which works with 3 differents selects on 3 differents values.

So. my "valueCheck" has sentences with some words and I want that it's possible to filtered these with Theme 1 + Theme 2. Currently, when I filter with one, I can't with the other. I can accumulate filters on themselves but not with the other.

EXEMPLE
Theme 1 option : Day, Month, Year
Theme 2 option : Happy, Sad, Tired
Sentences : One day I was happy, An other day I was sad, Work a full month is tiring
when I select Day + Year + Sad, I want to have :
- One day I was happy
- An other day I was sad

Currently if I pick in order : Day + Year + Sad, only Sad will be take for the filter and so, only
- An other day I was sad
will be return.

Thanks in advance for any helps.

score 1 · Answer 1 · answered Aug 13 '15 at 09:13

1

You have two drodowns and both are set to same ng-model.i.e ng-model="selectedValue". So value gets overwritten. You need to set separate ng-model for those two drop downs.

answered Aug 13 '15 at 09:13

Navaneet

1,367
1
19
44

score 0 · Answer 2 · answered Aug 13 '15 at 09:29

First of all, you should not bind 2 different selects with the same model (the ones you've mentioned as Theme 1 and Theme 2).

Then probably you should take a look on using ngOption instead of simply writing down the options yourself, the way angular manages the model being populated from html source (instead of scope defined one, or in an ng-init stance) is tricky and not always do what it supposed to do. In the end it's a mainly javascript-driven-html not the way around.

As for the filter you can simply pipe filter into another filter: Something like this:

<tr ng-repeat="value in allValues | filter:sel1Value | filter:sel2Value"> ... </tr>

refer general angular filter functionality page for further information.

AngularJS, filtered one sentence by multiples filters

2 Answers2