Question

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

任何帮助非常感谢！

Answer 1

更改所有这些内容：

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

到

那里做了两件事：

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

如果您的观点不需要更新，请尝试使用＆＃39;：＆＃39;操作员知道一次约束。它只会绑定一次数据并且不会注意它。

Answer 2

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

cordova plugin add cordova-plugin-crosswalk-webview

Github Repository

使用angularJS过滤器，离子应用程序非常慢

2 个答案: