aquint / ion-alpha-scroll

Alphabetically indexed list with alpha scroll bar.
99 stars 35 forks source link

How to make this plugin work with angularjs search/filter ? #13

Open MilesYM opened 8 years ago

MilesYM commented 8 years ago

I’m trying to do the following:

`

    <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search" ng-model="query">
    </label>

    <ion-alpha-scroll ng-model="users | filter: query" key="name" subheader="true">
        <h3>{{item.name}}</h3>
        <p>{{item.ticket}}</p>
    </ion-alpha-scroll>

`

But this is not working. Any idea?

Thanks!

MilesYM commented 8 years ago

Update:

I did not successfully implemented the Search filter function from angular in this plugin and did the following:

I have 2 lists, one visible and one not. One is filter compatible and the other one is built with this plugin:

<ion-content scroll=“false”>
        <ion-list class="bet-type-list”>
        <label class="item item-input”>
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Search" ng-model="$parent.query”>
        </label>

        <ion-alpha-scroll ng-if="!query" ng-model="ticketsList" key="username" subheader=“true”>
            <div ng-click="selectTicket(item.id)”>
                <h3>{{item.username}}</h3>
                <p>{{item.ticketname}}</p>
            </div>
        </ion-alpha-scroll>
        <ion-item ng-if="query" ng-click="selectTicket(ticket.id)" ng-repeat="ticket in list = ( ticketsList | filter: query )”>
            <h3>{{ ticket.username }}</h3>
            <p>{{ ticket.ticketname }}</p>
        </ion-item>
    </ion-list>
</ion-content>
tobeee commented 7 years ago

Did you ever solve this?

dm-marimuthu commented 7 years ago

@tobeee @MilesYM @poocart @aquint Hi Can you anyone explain how to achieve angular filter in ion-alpha-scroll?.

I dont want to use two list as mentioned above.

Can anyone help it out. Thanks in advance.

marimuthum17 commented 7 years ago

This is my code `

{{item.name}}

{{item.subtitle}}

</ion-alpha-scroll>`
dm-marimuthu commented 7 years ago

Have implemented custom ionic alpha scroll, Here you can find it out to how to achieve it.