Question

因此，这是指向代码http://plnkr.co/edit/Rrn6EA0nidatGWjMlwkw?p=preview

的链接

问题由于我使用离子无限滚动指令和for循环来动态填充带有内容的feed选项卡，我无法使搜索输入起作用，但是当我使用data.json文件时静态调用它一次并获得搜索输入正常工作的所有内容。我已经猜到了为什么它不起作用但他们并没有真正帮助我

这是代码，以防它吸引别人的眼球的 HTML

<div class="bar bar-subheader 
  item-input-inset bar-light">
  <label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" ng-model="query" placeholder="Search for post">
  </label>
</div>
<ion-content class="has-subheader">
    <ion-refresher on-refresh="load()">
    </ion-refresher>
    <ion-list>
        <ion-item ng-repeat='post in posts track by post.id | filter: query ' class='item-thumbnail-left item-text-wrap' href="#/tab/list/{{post.id}}">
            <img ng-src='{{post.photo}}' />
            <div>
            <p class='shortText titleArticle'>
                {{post.title | limitTo: 33}}
                {{ post.title.length > 33 ? '&hellip;' : '' }}
            </p>    
            <img class='articleAuthImg' src="http://cliparts.co/cliparts/kT8/oja/kT8oja7xc.png" alt="StoyanGenchev-author" />    
            </div>
            <div class='articleInfo'>
            <h2>{{post.author}}</h2>
            <h4>{{post.date}}</h4>
            <h4 class="category">{{post.category}}</h4>
            </div>
            <div class="clear"></div>
            <p class='shortText'>
                {{post.description | limitTo: 200}}
                {{ post.description.length > 200 ? '&hellip;' : '' }}
            </p>
        </ion-item>
    </ion-list> 
    <ion-infinite-scroll
    ng-if="noMore()"    
    on-infinite="get_more()"
    distance="15%"
    >
  </ion-infinite-scroll>
</ion-content>

APP.JS

starter.controller('ListController', ['$scope', '$http', '$stateParams',
function($scope, $http, $stateParams) {

$scope.posts = [];  
var startingPoint = 0;
var limit = 1;

$scope.load=function(startingPoint, limit){

$http.get('data.json').success(function(data) {

  for(var i = startingPoint; i<=limit; i+=1){
      $scope.posts.push(data.posts[i]);
      $scope.id=$stateParams.id;
  }

})
 .finally(function(){
                $scope.$broadcast('scroll.refreshComplete');
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });

};

$scope.get_more = function(){
            $scope.load(startingPoint, limit);
            limit+=2;
            startingPoint+=2;
        };   

$scope.noMore = function(){
    return ($scope.posts.length > 50) ? false : true;
};

  }]);

任何帮助都将被视为

Answer 1

我认为track by post.id是问题所在。

它应该是这样的： <ion-item ng-repeat='post in posts | filter: query track by post.id' >

过滤后应添加

track by。另请参阅此SO question。

昨天我可能刚刚删除了track by，因为我不知道订单在这里很重要。

更新了plunker。搜索tech可以查看过滤效果。

动态ng-model指令链接到搜索输入，该问题通过ng-repeat循环过滤动态填充的结果

1 个答案: