Hybrid Apps開發系列之3.2：輸入欄位 (Text Input)

Ionic官網文件區有幾個與Ionic CSS與JavaScript API的區塊可供參考。

圖1.Ionic官網文件：CSS/JavaScript/Input Types/ Ionicons都會經常使用。

各種介面的製作方式可從CSS Components找到一些CSS範例。JavaScript區塊則是Ionic擴充指令的說明，由於Ionic框架的目的在於快速介面製作，所以這些指令也大都是用來製作使用者介面。Ionicons是內建圖示；最後，製作輸入欄位的範例則在HTML5 Input Types區塊。

表單介面製作：輸入欄位 (text input)

文字輸入欄位設定方式如下，<input>元素的type屬性設定為"text"，代表一般文字，若設定為"number"則只能輸入數字：

<div class="list">
<label class="item item-input">
  <span class="input-label">姓名</span>
  <input type="text">  
</label>
<label class="item item-input">
  <span class="input-label">訂購數量</span>
  <input type="number">
</label>
</div>

其他輸入欄位範例，可參考Ionic官網關於HTML5 Input Type的說明。

和下拉選單相同，如果要運用表單輸入資料，例如計算、存入資料庫等等，則必須以ng-model為輸入欄位進行資料綁定，並搭配controller的$scope設定資料模型。 JS Bin

index.html程式說明

<div class="list" ng-app="starter"ng-controller="controller">
<label class="item item-input">
  <span class="input-label">姓名</span>
  <input type="text" ng-model="name">  
</label>
    <label class="item item-input">
    <span class="input-label">訂購數量</span>
  <input type="number" ng-model="amount">
</label>
</div>

• 第1行：ng-app定義此為AngularJS應用，名稱是"starter"，範圍涵蓋最外層的<div>元素。ng-controller則定義套用於此區塊的控制器。
• 第4行：綁定輸入欄位的資料模型變數name。app.js需搭配使用$scope定義資料模型變數。
• 第7行：綁定輸入欄位的資料模型變數amount。app.js需搭配使用$scope定義資料模型變數。

app.js程式說明

搭配的app.js則是：

var app=angular.module('starter',['ionic']);
app.controller('controller',function($scope){
    $scope.name="王小明";
    $scope.amount=10;
});

• 第3-4行：定義資料模型變數。

完整程式碼與執行情形請參考JS Bin專案。

下表是AngularJS常用指令的說明。