我有这个移动应用程序,其中列出了编码运输/出租车收据的记录。打开应用程序看到的第一页是收据列表。
templates/list-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)
按钮,它将转到添加/编辑收据页面:
templates/edit-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 Controller ,因此我将后退按钮的事件监听器放在那里:
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);
});
服务.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
当我不使用后退按钮事件监听器时,不会发生这种情况,但如果它在退出应用程序之前在列表和编辑页面之间切换历史记录,我会觉得很烦人。
我使用$window.localStorage
来存储数据,然后将其传递到$scope.receipts
作为列表ng-repeat
,我尝试过通过插入 alert()
以及从 localStorage 获取的收据对象作为参数来调试它。警报消息上有一个值,但列表不起作用。另一件事是它仍然可以从 $scope.receipts
计算总票价(也如屏幕截图中所述)。
非常感谢。
最佳答案
我想我发现了这个问题。我不知道如何在浏览器上复制它,但我能够在 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
我的 Controller 下的变量(像 $scope.receiptFilter = "";
这样的空字符串)只是为了在 ng-repeat
的结果中得到一些无害的东西.
在求助于track by receipt.id
之前,我试过track by $index
但错误仍然存在。我寻找答案,发现使用 $index
并不安全当使用orderBy
时.
综上所述,排序时( orderBy
),使用 track by <a unique key>
(不是$index
)。
我希望这个答案能有所帮助,并且对此的任何更多补充将不胜感激。 :)
关于javascript - ionic - angularjs - 在 Android 设备上重新打开应用程序后列表不呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33648816/