Question

我有这个移动应用程序，它列出了编码的运输/出租车收据的记录。打开应用程序时看到的第一页是收据清单。

模板/列表view.html

<ion-item class="card item item-light" ng-click="edit({{receipt.id}})" ng-repeat="receipt in receipts|orderBy:'receiptDate'">
   ...
</ion-item>
   ...
<ion-footer-bar class="bar-subfooter taxi-subfooter">
<div class="row">
    <div class="col">
        <button ng-click="addRecord(-1)" class="button button-block"><i class="icon ion-plus-round"></i></button>
    </div>
</div>

如果我点击该项目或单击带有addRecord(-1)的按钮，它将转到添加/编辑收据页面：

模板/编辑receipt.html

<ion-content padding="true" class="has-header has-footer taxi-has-subfooter">
    <div class="table">
        <div class="row">
            <div class="col title">Paper receipt provided?</div>
            <div class="col taxi-col">
                <label class="toggle toggle-balanced">
                    <input type="checkbox" ng-model="bindReceipt.hasReceipt">                       
                    <div class="track taxi-track">
                        <div class="handle taxi-handle"></div>
                    </div>
                </label>
                <input type="hidden" ng-model="bindReceipt.id" />
            </div>
        </div>
        <div class="row">
            <div class="col title">Date</div>
            <div class="col taxi-col"><input type="date" ng-model="bindReceipt.receiptDate" /></div>
        </div>
        <div class="row">
            <div class="col title">Vendor</div>
            <div class="col taxi-col"><input type="text" placeholder="Name of the Taxi" ng-model="bindReceipt.taxiVendor" /></div>
        </div>
        <div class="row">
            <div class="col title">Fare</div>
            <div class="col taxi-col"><input type="tel" placeholder="0.00" ng-model="bindReceipt.fare" /></div>
        </div>
    </div>
</ion-content>
<ion-footer-bar class="bar-subfooter taxi-subfooter">
        <div class="row"> <!-- update() functions also as add -->
            <div class="col taxi-col"><button class="button button-block" ng-click="update()">{{transType}}</button></div>
        </div>
    </ion-footer-bar>

我在手机后退按钮的行为中所做的是，如果状态在添加/编辑页面上，它将返回到列表页面，如果状态在列表页面上，无论如何很多时候用户会从/列出和编辑页面，它应该退出应用程序（不会回到应用程序历史记录）。所以，我使用navigator.app.exitApp()作为列表页面上的后退按钮。

templates / list-view.html使用ReceiptsCtrl控制器，所以我把后台按钮的事件监听器放在那里：

app.controller('ReceiptsCtrl', function($window, $scope, $filter, $state, $http, $ionicPopup, Receipts) {

    $scope.receipts = Receipts.getReceipts();

    $scope.historyBack = function(evt) {
        if(evt != null) {
          if(evt.preventDefault) {
            evt.preventDefault();
          }
        }

        var location = $window.location.href;
        if(location.charAt(location.length-1) === '/') {

            navigator.app.exitApp(); // exit the application
        } else {
            history.go(-1);
        }

      }

      document.addEventListener('backbutton', $scope.historyBack, false);

});

services.js

.factory('Receipts', function($window, $filter) {

  var receipts = JSON.parse($window.localStorage.getItem('receipts')) || [];
  return {
    getReceipts: function() {return receipts;}

  }

});

这是我的问题，我在Android中构建并运行后在我的应用程序中有这个场景：

打开应用。最初为0记录
添加两项 - 列表页面中的2条记录
当前在列表页面上然后退出应用程序（navigator.app.exitApp（）触发器）
再次打开应用程序，仍有2条记录
添加一项 - 列表页面中的3条记录
然后退出应用
打开应用缺少列表

方案here

当我不使用backbutton事件监听器时，这种情况不会发生，但如果它在退出应用程序之前经历了列表和编辑页面之间的历史记录，我会觉得很烦人。

我使用$window.localStorage存储数据，然后将其传递到$scope.receipts列表ng-repeat，我尝试通过插入带有从localStorage获取的收据对象的alert()来调试它论点。警报消息上有值，但列表不起作用。另一件事是，它仍然可以从$scope.receipts计算总票价（如屏幕截图所示）。

非常感谢。

Answer 1

我想我发现了这个问题。我不知道如何在浏览器上复制它，但我能够在Android设备监视器中捕获它

11-12 03:08:23.861: I/chromium(30444): [INFO:CONSOLE(139)] "Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=[Some data from my app URL encoded. It's too long]
11-12 03:08:23.861: I/chromium(30444):     at Error (<anonymous>)
11-12 03:08:23.861: I/chromium(30444):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:37:416
11-12 03:08:23.861: I/chromium(30444):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:309:261
11-12 03:08:23.861: I/chromium(30444):     at Object.fn (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:162:168)
11-12 03:08:23.861: I/chromium(30444):     at n.$digest (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:163:259)
11-12 03:08:23.861: I/chromium(30444):     at n.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:166:269)
11-12 03:08:23.861: I/chromium(30444):     at l (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:118:152)
11-12 03:08:23.861: I/chromium(30444):     at F (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:122:187)
11-12 03:08:23.861: I/chromium(30444):     at XMLHttpRequest.K.onload (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:123:220)", source: file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js (139)

我搜索了 ngRepeat：dupes - AngularJS不允许重复，建议使用track by来避免这样的错误。所以我更改了我的代码并在ng-repeat上使用它。

格式正确，我写道：

ng-repeat="receipt in receipts|orderBy:'receiptDate'| filter:receiptFilter track by receipt.id"

我在track by之后立即尝试orderBy，但无效。我发现应该在filter之后才能工作。所以我在我的控制器下创建了一个receiptFilter变量（类似于$scope.receiptFilter = "";的空字符串），只是为了在ng-repeat的结果中有一些无害的东西。

在诉诸track by receipt.id之前，我尝试track by $index，但错误仍然存在。我寻找答案，发现在使用$index时使用orderBy是不安全的。

总之，排序时（orderBy），请使用track by <a unique key>（不是$index）。

我希望这个答案会有所帮助，我们将非常感谢您对这一问题的补充。：）

ionic - angularjs - 在Android设备上重新打开应用程序后无法呈现列表

1 个答案: