使用ionic css元件、ionic javascript UI指令、以及AngularJS框架，可快速製作出表單介面。
表單介面製作：下拉選單(select/option)
下拉選單CSS基本範例如下 (可參考Ionic官網下拉選單)：
此為CSS基本設定，如要與app流程結合，例如設定預設選項、選取匯率資料等，還必須套用AngularJS提供的相關功能(AngularJS directives)才行。例如在適當處加入ng-model, ng-options指令，便可讓下拉選單產生作用。 JS Bin 修改後的index.html檔如下：
<label class="item item-input item-select">
<div class="input-label">
選擇顏色
</div>
<select>
<option>藍色</option>
<option selected>綠色</option>
<option>紅色</option>
</select>
</label>
此為CSS基本設定，如要與app流程結合，例如設定預設選項、選取匯率資料等，還必須套用AngularJS提供的相關功能(AngularJS directives)才行。例如在適當處加入ng-model, ng-options指令，便可讓下拉選單產生作用。 JS Bin 修改後的index.html檔如下：
<body ng-app="starter" ng-controller="controller">
<div>
<label class="item item-input item-select">
<div class="input-label">
選擇顏色
</div>
<select ng-model="myColor" ng-options="item.value as item.name for item in colors">
</select>
</label>
<div style="border:solid 1px black; height:20px"
ng-style="{'background-color':colors[myColor].name}">
</div>
</div>
</body>
index.html程式說明
- 第1行：加入ng-app指令，說明這是一個名為"starter"的AngularJS應用，涵蓋範圍為<body>元素內。ng-controller則用來指定套用於<body>元素的控制器，且其名為"controller"。"starter"與"controller"都必須在JavaScript端以AngularJS模組實做出來。
- 第7行：ng-model將下拉選單與資料模型變數myColor綁定 (binding)。資料模型變數必須在套用於此區域的控制器，也就是"controller"內，透過$scope加以定義。此外，myColor將會儲存下拉選單選定項目對應的數值。各項目對應的數值會在ng-options指令內定義。ng-options則用來設定下拉選單的各個項目：包括各項目顯示的文字、以及對應值。ng-options有許多寫法，此處引用的是：
select as label for value in array
select為對應的數值，label為顯示的文字 ，value為陣列元素變數，array則是資料模型陣列。因此，程式中colors是來自資料模型的陣列；item則是陣列元素變數，item.name, item.value分別是文字與對應的數值。 - 第11行：ng-style可用來設定css格式。colors[myColor].name將會取得選取項目的name署性值。colors定義於app.js中。
var app=angular.module('starter',['ionic']);
app.controller('controller',function($scope){
$scope.colors = colors;
$scope.myColor = 0;
});
var colors=[
{name:'red', value:0},
{name:'blue', value:1},
{name:'black', value:2}
];
app.js程式說明
- 第1行：angular.module()用來建立AngularJS模組。不論是AngularJS應用或是controller都是模組。此模組名為"starter"，也呼應index.html裡ng-app所指定的應用名稱。第二個參數則說明starter使用'ionic'模組提供的功能。
- 第2-3行：使用controll()建立名為"controller"的功能模組。模組功能則定義於第二個參數。$scope是AngularJS內建的重要服務，提供data binding的作用，為前端頁面綁定相關之資料模型變數。第3行便定義了資料模型變數$scope.colors，供'controller'控制的頁面區塊 (也就是index.html裡第1行ng-controller="controller"指定的區塊)使用。
- 第4行：定義資料模型變數$scope.myColor，初值設定為0。連帶的作用便是設定預設選項為value:0的項目。第8行顯示該項目為紅色。
- 第7-11行：定義下拉選單項目的文字與對應值。
此外，下表則是幾個AngularJS常用指令的說明。
沒有留言:
張貼留言