I’m using collection-repeat for my app but this doesn’t make a difference. I have a search field which searches trough a JSON list with about 200 entries. For some strange reason when i enter text into the search field it’s faster than when I delete text from the search field but still slow. The app isn’t really useable when it’s like this. I’m using a LG G4 and a iPhone6. It’s faster on iOS. Is this really to much for a ionic app?
So this is my code for the app:
<ion-view view-title="Title">
<ion-header-bar class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper search">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search..." type="search" ng-model="searchBox.storeName">
</label>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item collection-repeat="item in items | filter:searchBox" item-height="150px" item-width="100%" ng-show="searchBox.storeName.length > 0" ng-model-options="{debounce: 500}">
<h2>{{item.storeName}}</h2>
<p>{{item.description}}</p>
<br>
<div class="icons">
<i ng-hide="item.noGlobe === 1" ng-click="openLink(item.link)" class="icon ion-earth links"></i>
<i class="icon ion-ios-clock-outline links" ng-click="showAlert(item.openingHours[0], item.openingHours[1], item.openingHours[2], item.openingHours[3],
item.openingHours[4], item.openingHours[5], item.openingHours[6]
)"></i>
<i ng-hide="item.noPhoneAndMap === 1 || item.noMap === 1" ng-click="openLink(item.addressLink)"class="icon ion-ios-location-outline links"></i>
<a href="tel:{{item.phone}}">
<i ng-hide="item.noPhoneAndMap === 1 || item.noPhone === 1" class="icon ion-ios-telephone-outline links"></i></a>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
And this is my controller:
var init = function() {
$http.get('http://domain.com/open.jsonp').
success(function(data, status, headers, config) {
$scope.items = data;
}).
error(function(data, status, headers, config) {
// log error
}); // check if there is query in url
// and fire search in case its value is not empty
};
init();
$scope.showAlert = function(mo, di, mi, don, fr, sa, so) {
function getStrWithBr(str) {
return str ? str + '<br/>' : '';
}
var content =
getStrWithBr(mo) +
getStrWithBr(di) +
getStrWithBr(mi) +
getStrWithBr(fr) +
getStrWithBr(sa) +
getStrWithBr(so);
$ionicPopup.alert({
title: 'Öffnungszeiten',
content: content
}).then(function(res) {
console.log('Test Alert Box');
});
};
$scope.openLink = function(link) {
window.open(link, '_blank', 'location=yes');
}
})
If somebody needs the git repo, here it is:
https://github.com/patrickhofer/sz
Any help much appreciated!