手機程式設計

ng指令與$scope變數

March 2016

2-way data binding

View

Template

{{name}}

{{email}}

Controller

$scope.name

$scope.email 

......                 

model

編譯

DOM

SCOPE

即時更新

即時更新

範例：登入頁面

• state設定
• 撰寫controller：使用$scope變數
• 撰寫頁面：使用ng指令

state設定

angular.module('starter', ['ionic'])
        .config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                    .state('login', {
                        url: '/login',
                        templateUrl: 'templates/login.html',
                        controller: 'LoginCtrl'
                    })
            $urlRouterProvider.otherwise('/login');
        })
        .controller()
        .run(function ($ionicPlatform) {
            $ionicPlatform.ready(function () {
            // .....
        })

撰寫controller：使用$scope

//...
.controller('ScopeCtrl', function ($scope) {
            $scope.formData = {
                name: '',
                passwd: ''
            };

            $scope.login = function () {
                console.log('name/pwd', $scope.formData.name);
            };

        })

$scope.formData

可定義任意名稱物件，供頁面使用。

$scope.login = function()

可定義任意名稱函式，供頁面呼叫。

console.log() 

輸出訊息至開發人員工具（F12）之控制台

撰寫頁面：使用ng指令

<ion-view title='登入測試'>
    <ion-content>
        <div class="item item-input" >
          <input type="text" ng-model='formData.name' placeholder="輸入帳號">
          <P>{{name}}</P>
        </div>
        <label class="item item-input">
          <input type='password' ng-model='formData.passwd' placeholder="輸入密碼">
        </label>
        <div class="item">        
        <button ng-click='login()'>登入</button>
        </div>
    </ion-content>
</ion-view>

ionic css設定

item: 清單項目

item-input: 輸入框

ng-model 

設定欄位的資料模型變數

ng-click 

設定按鈕點選後執行的函式

範例：陣列處理

• JavaScript陣列, 物件
• 清單列表：controller
• 清單列表：頁面

JavaScript陣列與物件

// 數字陣列
var array= [1,2,3,4,5];   
// 字串陣列
var person = ['John', 'Mary', 'Joe', 'Lilly'];
// 資料型別可混合
var mix = ['banana', 'apple', 100, 20];

// 物件person, 各欄位person.firstName....
var person = {firstName:"Joe", lastName:"Johnson", age:46};

// 物件陣列
var persons = [
{firstName:"Joe", lastName:"Johnson", age:46},
{firstName:"John", lastName:"Stockton", age:36},
{firstName:"Jerry", lastName:"Stackhouse", age:26}
];

清單列表：Controller

.controller('NgRepeatCtrl', function ($scope) {
    var settings = [
        {label: '飛航模式', value: 'false', icon: 'ion-plane'},
        {label: 'Wi-Fi', value: 'false', icon: 'ion-wifi'},
        {label: '藍牙', value: 'false', icon: 'ion-bluetooth'},
        {label: '個人熱點', value: 'false', icon: 'ion-android-wifi'}
    ];
    $scope.settings = settings;
})

ionicons.com（Ionic內建圖示）

點選圖示可取得圖示代號（如ion-plane等）

清單列表：頁面

<ion-view title='設定'>
    <ion-content>
        <div class='list' ng-repeat="item in settings">
            <div class='item item-icon-left'>
                <i class='icon {{item.icon}}'></i>
                {{item.label}}
            </div>
        </div>
    </ion-content>
</ion-view>

ng-repeat

設定迴圈。需指定 "迴圈變數 in 陣列物件"，例如："item in settings"。item即為迴圈內可用變數，settings則是controller端設定的陣列物件。

ionic css設定

list: 清單

item: 清單項目

item-icon-left: 清單圖示顯示於左側

Ionic CSS練習

• ionicons圖示
• 輸入欄位
• 清單、按鈕...

ionicons.com

Ionic 表單輸入CSS

http://ionicframework.com/docs/components/#forms

Ionic 清單CSS

http://ionicframework.com/docs/components/#list

Ionic 按鈕CSS

http://ionicframework.com/docs/components/#buttons​