費用跟蹤利用采取了Wijmo5和Ionic Framework創建，目的是構建1個hybird app。
我們基于《Mobile first! Wijmo 5 + Ionic Framework之：Hello World！》的環境，將在本教程中完成費用跟蹤App的構建。下面的代碼結構是本教程完成要到達的效果，請預先創建好文件和目錄。
www/ --> 工程根目錄 index.html --> app 布局文件 (主HTML文件) css/ --> css 目錄 js/ --> javascript 目錄 app.js --> 主模塊 app.routes.js --> 主路由模塊 controllers/ --> app控制器目錄 models/ --> app模塊目錄 services/ --> app 數據Service目錄 templates/ --> angularJs視圖代碼目錄(通過UI-Router調用) lib/ --> 第3方類庫, 包括Ionic, Wijmo, jQuery等
在費用跟蹤App中，我們先要創建Data Model，E-R圖以下
在代碼中，我們需要在www/js/services構建AngularJs Services來對數據模型進行建模。我們會用到HTML5的localStorage進行數據本地存儲, 采取的格式為JSON。 需要注意的是，HTML5本地存儲只能存字符串，任何格式存儲的時候都會被自動轉為字符串，所以讀取的時候，需要自己進行類型的轉換。目前我們實現的是HTML5 本地存儲，有興趣的讀者還可移植為RESTful API、SQLite等數據存儲方法。
運行demo后，通過Chrome調試查看的本地存儲截圖：
在開支歷史頁面中，提供了2個功能：閱讀開支歷史記錄、刪除開支記錄。為了實現這些功能，在wwwjscontrollershistory.js文件中，添加以下代碼：
//從localStorage取得開支數據 $scope.expenses = ExpenseSvc.getExpensesWithCategory();
這行代碼提供了返回本地存儲的開支記錄。ExpenseSvc 服務，不但返回了開支對象，同時也返回了開支分類?；谶@些數據，在
www emplateshistory.tpl.htm文件中，在ion-context指令內添加Ionic的ion-list指令，代碼以下：
<ion-view title="History"> <ion-nav-buttons side="right"> <a class="button button-icon icon ion-plus" href="#/app/create"></a> </ion-nav-buttons> <ion-content class="has-header"> <ion-list> <ion-item ng-repeat="expense in expenses | orderBy:'date':reverse track by expense.id" class="item item-icon-left"> <i class="icon ion-record {{ expense.category.cssClass }}"></i> <div class="row"> <div class="col⑸0"> <h2>{{ expense.title }}</h2> </div> <div class="col⑵5"> <small class="light-grey">{{ expense.date | date: 'shortDate' }}</small> </div> <div class="col⑵5"> {{ expense.amount | currency }} </div> </div> </ion-item> </ion-list> </ion-content> </ion-view>
ion-list指令，用于生成排序的HTML列表，其子標簽ion-item指令用于生成HTML列表項。 在ngRepeat指令中，我們使用了“track by”，目的是在對開支集合修改時提升性能，相干教程可參考博客《Using Track-By With ngRepeat In AngularJS 1.2 》。
現在添加刪除開支記錄按鈕，用于向左滑動出現刪除按鈕、點擊刪除可刪除開支記錄。
在ion-item標簽關閉前添加ion-option-button標簽，代碼以下：
<ion-option-button class="button button-assertive" on-tap="confirmDelete(expense.id)">Delete</ion-option-button>
ion-option-button 是Ionic提供的另外一個指令，用于在ion-item指令內試用。默許的，ion-option-button 是隱藏的，當在ion-item內向左滑動，則按鈕會可見。這個功能特別對小屏幕裝備非常重要。另外，還可通過該指令內置的can-swipe來實現對這個權限的管理--如有的用戶不允許刪除操作權限。
在刪除函數中（控制器），可看到代碼片斷以下：
function confirmDelete(expenseId) {
// delete expense by its id property
$scope.expenses = ExpenseSvc.deleteExpense(expenseId);
}通過這個代碼，我們調用ExpenseSvc服務的deleteExpense進行刪除指定的開支記錄(expenseId)，同時這個方法也會返回開支記錄集適用于更新頁面數據。在真實的場景中，刪除記錄返回全部集合不是最理想的，但在此處我們用于演示說明?？蓜邮衷囍鴦h除幾行數據試試。
另外，在刪除這類比較危險的操作中，應當需要添加對話框再次提示1下用戶。這里我們使用了Ionic提供的$ionicActionSheet service服務來實現。更新wwwjscontrollershistory.js控制器代碼的confirmDelete函數以下：
//刪除開支記錄 $scope.confirmDelete = function (expenseId) { //ionic的 確認對話框 // show()函數返回了1個函數，用于隱藏actionSheet var hideSheet = $ionicActionSheet.show({ titleText: 'Are you sure that you'd like to delete this expense?', cancelText: 'Cancel', destructiveText: 'Delete', cancel: function () { // 如果用戶選擇cancel, 則會隱藏刪除按鈕 $ionicListDelegate.closeOptionButtons(); }, destructiveButtonClicked: function () { // 通過id刪除開支記錄 $scope.expenses = ExpenseSvc.deleteExpense(expenseId); // 隱藏對話框 hideSheet(); } }); };
ionicActionSheet服務提供了自定義接口，可實現各種提示對話框。上面代碼實現的提示對話框效果截圖以下：
點擊History頁面右上角的
可實現手工創建1條新的開支記錄。在www emplatescreateExpense.tpl.htm文件中，代碼以下：
<ion-view title="Create"> <ion-content class="has-header padding"> <form name="frmCreate"> <div class="custom-form-list list"> <label class="item item-input"> <i class="icon ion-alert-circled placeholder-icon assertive" ng-show="!frmCreate.title.$pristine && frmCreate.title.$invalid"></i> <input name="title" type="text" placeholder="Title" ng-model="expense.title" ng-maxlength="55" required> </label> <wj-input-number value="expense.amount" min="0" step="5" format="c2"></wj-input-number> <wj-calendar value="expense.date"></wj-calendar> <wj-combo-box items-source="categories" display-member-path="htmlContent" selected-value-path="id" selected-value="expense.categoryId" is-editable="false" is-content-html="true"></wj-combo-box> <label class="item item-input"> <textarea placeholder="Description" ng-model="expense.description"></textarea> </label> </div> <div class="button-bar"> <button type="button" class="button button-dark icon-left ion-close" on-tap="cancel()">Cancel</button> <button type="button" class="button button-balanced icon-left ion-checkmark" on-tap="addExpense()" ng-disabled="frmCreate.title.$invalid">Save</button> </div> </form> </ion-content> </ion-view>
這里使用ion-view 和 ion-content 指令進行內容展現。然后再添加Form，用ng-show指令驗證輸入內容---Wijmo的指令已在輸入門限做了限制，故不需要驗證。同時Wijmo Calendar 和InputNumber應當是自解釋，ComboBox中可能不是。
ComboBox關聯數據模型中的開支分類，我們通過其itemsSource屬性進行數據綁定。ComboBox的displayMemberPath 用于設置顯示內容，selectedItem的selectedValue用于選擇開支分類的id屬性。
在createExpense 控制器中，可看到以下的代碼片斷：
// 初始化Expense object $scope.expense = new Expense('', 0, new Date(), '', null); // 取得HTML類型的開支分類 $scope.categories = CategorySvc.getCategoriesWithHtmlContent(); // 用localStorage存儲開支數據 $scope.addExpense = function () { // insert expense ExpenseSvc.insertExpense($scope.expense); $scope.cancel(); }; // 取消方法 (如，可回到主頁面) $scope.cancel = 生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
上一篇 前端基礎――CSS+DIV布局
下一篇 程序編寫中的細節問題
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
