使用angularJS过滤器的离子应用程序非常慢答案

【问题标题】：Ionic app is very slow with angularJS filter使用angularJS过滤器的离子应用程序非常慢
【发布时间】：2016-03-31 12:17:15
【问题描述】：

我正在过滤大约 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": [
            ""
        ]
    }

非常感谢任何帮助！

【问题讨论】：

标签： javascript angularjs json ionic-framework

【解决方案1】：

改变所有这些东西：

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

到

在那里做了两件事：

删除无用的 {{}} 显示，您已经在 ng-bind-html 中绑定了它。这可能有效，但可能会为 Angular 创建 2 个手表
使用 ng-repeat，更具可读性。

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

【讨论】：

【解决方案2】：

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

cordova plugin add cordova-plugin-crosswalk-webview

Github Repository

【讨论】：

谢谢，我可以用 iOS 做什么？