Performance problems with LG G4


#1

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!