Ionic应用程序使用angularJS过滤器非常慢

Ionic app is very slow with angularJS filter

本文关键字：过滤器 非常 angularJS 应用程序 Ionic      更新时间：2023-10-30

我正在筛选大约200个条目。JSONP文件来自我的服务器。该应用程序非常缓慢，在android或iOS手机上几乎不可能打字。

我试图用track by item.storeName进行限制，但这无济于事。

这是我的html:

<ion-view view-title="Open">
    <ion-content class="bgstart">
      <img src="img/logo.png" class="logo" alt="">
      <h4 class="offline" ng-hide="online">Bitte verbinden Sie sich mit dem Internet</h4>
      <input type="text" ng-model="searchBox" class="search1" placeholder="Suchen...">
    <div ng-repeat="item in posts | filter:searchBox track by item.storeName" class="card" ng-show="searchBox">
      <h3 class="w shop">{{item.storeName}}</h3><br><br>
      <p class="w" ng-bind-html="item.openingHours[0]">{{item.openingHours[0]}}
      </p>
      <p class="w" ng-bind-html="item.openingHours[1]">{{item.openingHours[1]}}
      </p>
      <p class="w" ng-bind-html="item.openingHours[2]">{{item.openingHours[2]}}
      </p>
      <p class="w" ng-bind-html="item.openingHours[3]">{{item.openingHours[3]}}
      </p>
      <p class="w" ng-bind-html="item.openingHours[4]">{{item.openingHours[4]}}
      </p>
      <p class="w" ng-bind-html="item.openingHours[5]">{{item.openingHours[5]}}
      </p>
      <p class="w" ng-bind-html="item.openingHours[6]">{{item.openingHours[6]}}
      </p>
      <p class="c">
        <a href="tel:{{item.phone}}">
          <i ng-hide="item.noPhoneAndMap === 1 || item.noPhone === 1" class="fa fa-phone fa-2x"></i>
        </a>
      </p>
      <p class="c">
        <a href="#" ng-click="GotoLink('{{item.addressLink}}')">
          <i ng-hide="item.noPhoneAndMap === 1 || item.noMap === 1" class="fa fa-map fa-2x"></i>
        </a>
      </p>
      <p class="c">
        <a href="#" ng-click="GotoLink('{{item.link}}')">
          <i ng-hide="item.noGlobe === 1" class="fa fa-globe fa-2x"></i>
        </a>
      </p>
      <img ng-hide="item.noPhoneAndMap === 1" ng-src="{{item.image}}" alt="" class="img-l" />
      <p class="w">
        {{item.customer}}
      </p>
    </ion-content>
</ion-view>

JSON条目如下所示：

{
        "storeName": "",
        "addressLink": "",
        "phone": "",
        "image": "",
        "cumstomer": "",
        "description": "",
        "link": "",
        "openingHours": [
            ""
        ]
    }

非常感谢您的帮助！

更改所有这些内容：

<p class="w" ng-bind-html="item.openingHours[0]">{{item.openingHours[0]}}
  </p>

至

在那里做了两件事：

  1. 删除无用的｛｛｝｝显示，您已经将其绑定到ng-bind-html中。这可能有效，但可能会为angular创建2块手表
  2. 使用ng重复，可读性更强

如果您的视图不需要更新，请尝试使用"："运算符作为一次性绑定。它只会绑定数据一次，不会监视它。

尝试添加Crosswalk Webview以解决性能问题。

cordova plugin add cordova-plugin-crosswalk-webview

Github存储库

相关文章：