在离子列表中使用过滤器和无限滚动时遇到问题?

时间:2016-12-30 06:55:01

标签: javascript angularjs ionic-framework

我创建了一个离子混合应用程序,因为我在angularjs filter.let中遇到问题我们在下面清楚地解释了

          <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>

上面的代码我在ng-repeat中使用了过滤器,并且我使用了无限滚动列表,然后个性数组包含18000个按字母顺序排列的值。所以问题是如果我搜索&#34; zolten rhimer&#34;即使名称存在于数组中,列表也是空的。请任何人帮我解决此问题

谢谢,

1 个答案:

答案 0 :(得分:0)

你这样使用

    <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>

我认为这会对你有所帮助