Ionic 行動應用框架: Hybrid Apps開發系列之5.2：彈出式視窗$ionicModal運用於「資料編輯」

在進入更複雜的自訂Services範例之前，由於許多服務都牽涉到即時編輯與更新資料的功能，因此有必要先介紹適合用來編輯資料的「彈出式視窗」。Ionic「彈出式視窗」有兩類：$ionicModal與$ionicPopup。$ionicModal是完整頁面，以

<ion-modal-view></ion-modal-view>

建置頁面，$ionicPopup則是對話框 (dialog)式，直接用JavaScript設定對話框的一些餐數值，通常用於訊息通知、確認等作用。兩種彈出式視窗外觀如下圖所示。

圖1. 彈出式視窗有兩種：$ionicModal與$ionicPopup

圖1上半的範例使用$ionicModal，下半則使用$ionicPopup。接下來以$ionicModal為例，說明如何製作彈出式視窗，進行資料編輯。

$ionicModal運用範例

此範例假設有一組記事項目資料，包含標題、內容等欄位，程式以內建JSON物件模擬資料來源。之後的範例，將改為資料庫存取的方式。JSON物件內容如下：

var notes = [
    {title: '記事1', message: '記事內容在此', date: '2015/4/29'},
    {title: '開會通知', message: '本學期第一次班會於5/25舉行', date: '2015/4/29'},
    {title: '教育訓練', message: '個資法教育訓練還有兩場', date: '2015/4/30'}
]

據此可建立一清單，顯示所有內容，而點選新增，則會跳出以$ionicModal製作的視窗，新增記事內容，如圖1上半所示。

$ionicModal視窗通常是在某個頁面的controller內建立。app.js包含controller的定義如下：

	angular.module('starter', ['ionic'])
	.run(function ($ionicPlatform) {
	$ionicPlatform.ready(function () {
	// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
	// for form inputs)
	if (window.cordova && window.cordova.plugins.Keyboard) {
	cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
	}
	if (window.StatusBar) {
	StatusBar.styleDefault();
	}
	});
	})
	.config(function ($stateProvider, $urlRouterProvider) {
	$urlRouterProvider.otherwise('/home')
	$stateProvider
	.state('home', {
	url: '/home',
	templateUrl: 'templates/home.html',
	controller: 'homeCtrl'
	})
	})
	.controller('homeCtrl', function ($scope, $ionicModal) {
	$scope.note = []; // 新增記事使用
	$scope.notes = notes; //所有記事

	$scope.addNote = function () { // 開啟modal視窗,填寫資料
	$scope.openModal(); //開啟視窗
	};
	$scope.insert = function (note) { // 新增記事
	note.date = new Date().toLocaleDateString();
	$scope.notes.push(note);
	$scope.closeModal();
	}
	$ionicModal.fromTemplateUrl('templates/addNote.html', {// modal視窗定義
	scope: $scope,
	animation: 'silde-in-up'
	}).then(function (modal) {
	$scope.modal = modal;
	})
	$scope.openModal = function () {
	$scope.modal.show();
	}
	$scope.closeModal = function () {
	$scope.modal.hide();
	}
	$scope.$on('$destroy', function () {
	$scope.modal.remove();
	})
	})

	var notes = [
	{title: '記事1', message: '記事內容在此', date: '2015/4/29'},
	{title: '開會通知', message: '本學期第一次班會於5/25舉行', date: '2015/4/29'},
	{title: '教育訓練', message: '個資法教育訓練還有兩場', date: '2015/4/30'}
	]

view raw app.js hosted with ❤ by GitHub

第27-29行：建立addNote()函式，供頁面呼叫，開啟modal視窗。modal視窗則定義於35-40行。第41行開始則是openModal()函式定義。
第30-34行：新增一筆資料，並關閉modal視窗。
第35-40行：以.fromTemplateUrl(fileUrl, [options])建立modal視窗。第一個參數指定modal視窗html檔所在，第二個參數則是modal視窗額外的參數，此處定義scope和home.html相同，以及視窗出現的動畫形式。第39行則將建好的modal視窗設定為資料模型，以便後續進行開啟、關閉、跟移除視窗等動作。
第41-43行：定義開啟modal視窗的函式。
第44-46行：定義關閉modal視窗的函式。
第47-49行：移除modal視窗。.$on('$destroy', function)，定義onDestroy事件處理。

顯示所有內容清單的home.html如下：

	<ion-view title="記事本">
	<ion-nav-buttons side="right">
	<button class="button button-clear" ng-click="addNote()">新增</button>
	</ion-nav-buttons>
	<ion-content>
	<ion-list class="list list-inset">
	<ion-item class="item item-button-right" ng-repeat="note in notes" >
	<p>{{note.title}}</p>
	<span>{{note.message}}</span>
	</ion-item>
	</ion-list>
	</ion-content>
	</ion-view>

view raw home.html hosted with ❤ by GitHub

最後$ionicModal建立視窗所指定的addNote.html程式碼如下：

	<ion-modal-view>
	<ion-header-bar class="bar-energized">
	<h1 class="title">新增記事</h1>
	</ion-header-bar>
	<ion-content>
	<label class="item item-input">
	<span class="input-label">標題</span>
	<input type="text" ng-model="note.title">
	</label>
	<label class="item item-input">
	<textarea placeholder="記事內容" ng-model="note.message"></textarea>
	</label>
	<button class="button button-block" ng-click="insert(note)">新增</button>
	</ion-modal-view>

view raw addNote.html hosted with ❤ by GitHub

index.html程式碼則是：

  <body ng-app="starter">
  <ion-nav-bar class="bar-positive">
      <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
  </body>

Ionic 行動應用框架

2015年4月30日星期四

Hybrid Apps開發系列之5.2：彈出式視窗$ionicModal運用於「資料編輯」

$ionicModal運用範例

沒有留言:

張貼留言

2015年4月30日 星期四

Hybrid Apps開發系列之5.2：彈出式視窗$ionicModal運用於「資料編輯」

$ionicModal運用範例

沒有留言:

張貼留言

2015年4月30日星期四