I am using collection repeat for displaying a list of data and using a custom filter in it.Everything works fine but when i come back from the second page, the data is not rendered until i make a contact to the screen.Here is my code,
.filter('customFilter', function () {
return function (arr,searchString) {
var names = [];
var ans = [];
var item = {};
if(!searchString){
return arr;
}
searchString = searchString.toLowerCase();
angular.forEach(arr, function(item){
if(item.name.toLowerCase().indexOf(searchString) !== -1){
names.push(item);
}
else{
if(item.metadata.toLowerCase().indexOf(searchString) !== -1){
ans.push(item);
}
}
});
if(names.length!=0)
{
item['name']='<font color="black"><b>Most relevant results</b</font>'
names.splice(0,0,angular.copy(item));
}
if(ans.length!=0)
{
item['name']='<font color="black"><b> Other relevant results</b></font>'
ans.splice(0,0,angular.copy(item));
}
return names.concat(ans);
};
})
The Html code
<div>
<ul class="list">
<li class="item item-text-wrap" collection-repeat="item in searchJson| customFilter:search.value" >
<div class="row row-center row-height">
<font class="text_color">
<span ng-bind-html="highlight(item.name, search.value)"></span>
</font>
</div>
</li>
</ul>