CODEWITHSUNDEEP
javascriptangularjsionic-framework
R.Anandan
R.Anandan

Reputation: 342

Getting a issue while using filter and infinite scroll together in ionic list?

I have created a ionic hybrid app in that i am getting issue in angularjs filter.let us explained clearly in below 

          <input type="search" placeholder="Search personalities" ng-model="name"  ng-change='alert("changed!")'> 
        </label>

    <ion-list id="personalities-list3">
        <!--<ion-item class="item-divider" id="personalities-list-item-divider1"> A</ion-item> auto-list-divider auto-list-divider-value="{{per.name}}"-->
        <ion-item class="item-avatar" id="personalities-list-item27"  ng-repeat="per in personality|limitTo:showlength|filter:{name:name}" ng-click="selectedpersonality(per)" auto-list-divider auto-list-divider-value="{{per.name}}" auto-list-divider-visible="{{divvisible}}">
            <!--<img image-lazy-src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0' image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="1000">-->
            <img src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0'>
            <img src="img/no-image.jpg" ng-if='per.profileimage==""'>
            <h2>{{per.name}}</h2>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

the above code i have used filter in ng-repeat and also i have used a infinite scroll for list and then personality array contains 18000 values that is in alphabetical order .so for the problem is if i search "zolten rhimer"the list is empty even though the name is present in array .please any one help me to solve this issue

Thanks,

Upvotes: 0

Views: 378

Answers (1)

user7073727
user7073727

Reputation:

You use like this

    <ion-list id="personalities-list3">
        <!--<ion-item class="item-divider" id="personalities-list-item-divider1"> A</ion-item> auto-list-divider auto-list-divider-value="{{per.name}}"-->
        <ion-item class="item-avatar" id="personalities-list-item27"  ng-repeat="per in personarraytosearch=personality|filter:{name:name}|limitTo:showlength " ng-click="selectedpersonality(per)" auto-list-divider auto-list-divider-value="{{per.name}}" auto-list-divider-visible="{{divvisible}}">
            <!--<img image-lazy-src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0' image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="1000">-->
            <img src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0'>
            <img src="img/no-image.jpg" ng-if='per.profileimage==""'>
            <h2>{{per.name}}</h2>
        </ion-item>
    </ion-list>

i think this will help you

Upvotes: 0

Related Questions