Using filter inside ionic modal


#1

Hi guys!

i was trying to create a filter inside a ionic modal:

<div class="modal">
<ion-header class="bar bar-header bar-positive">
    <h1 class="title">Estados</h1>
    <a ng-click="closeStatesModal()" class="button button-outline button-light item-button-right" ><i class="ion-close"></i> Fechar</a>
</ion-header>
<ion-content has-header="true" has-padding="true" has-footer="true">
    Busca: <input type="text" ng-model="searchState.name">
    <div class="list">
        <ion-radio ng-repeat="state in states | filter:searchState" ng-hide="(state in states | filter:searchState).length == 0" ng-model="company.state_id" ng-change="selectState(state.name)" ng-value="state.id">{{state.name}}</ion-radio>
    </div>
</ion-content>

It works, but i got some bugs with the animation, the result slides down twice.
Has anyone been through this before?
Thanks!


#2

Can you set up a codepen or plunker?


#3

Sure!
The problem appears only when i use the ion-radio.


#4

Hmm, I think we may have got an issue here. I replaced the directive with just the plain mark up and it maybe an issue with the item-radio class. Basically when you remove that, you get the correct animation, but none of the correct style.

I’d open an issue on github and point to the codepen.


#5

Thank you, i’ll do that.