<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8" />
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<title></title>
<meta
charset="utf-8"
/>
</head>
<body ng-controller="MainCtrl
as ctrl">
<!--文字輸入區塊-->
<textarea
ng-model="ctrl.user.address"
required
placeholder="文字輸入區塊"></textarea><br/>
核取方塊：
<!--核取方塊，AngularJS提供兩個屬性引數ng-true-value及ng-false-value給核取方塊控制使用-->
<input
type="checkbox"
ng-model="ctrl.user.agree"
ng-true-value="YES"
ng-false-value="NO"/><br /><br
/>
核取方塊是否勾選體驗效果<br />
------
<!--利用核取方塊加上勾選或不勾選來做到boolenan的效果-->
<div
ng-repeat="sport
in ctrl.sports">
<label ng-bind="sport.label"></label>
<div>
With Binding:
<input type="checkbox"
ng-model="sport.selected"
ng-true-value="YES"
ng-false-value="NO"/>
</div>
<div>
Using ng-checked:
<!--ng-checked
true表示勾選、false表示不勾選-->
<input type="checkbox"
ng-checked="sport.selected=='YES'"/>
</div>
<div>
Current state:
<span ng-bind="sport.selected"></span>
</div>
------
</div>
<br
/>
選項按鈕<br
/>
<!--ng-init初始化otherGender為other、並預設user.gender的值為female-->
<div
ng-init="otherGender='other';user={gender:'female'}">
<!--三個按鈕都綁定到相同ng-model上-->
<input type="radio"
name="gender"
ng-model="user.gender"
value="male"
/>Male
<input type="radio"
name="gender"
ng-model="user.gender"
value="female"
/>Female
<!--ng-value動態綁定value，此處並不是單純綁定'otherGender'，而是綁定otherGender的變數值other-->
<input type="radio"
name="gender"
ng-model="user.gender"
ng-value="otherGender"
/>{{otherGender}}
<br/>
你選擇的值是：{{user.gender}}
</div>
<br
/>
靜態下拉選單<br
/>
<!--location初始化為Taiwan，當使用者選擇其他選項時，value屬性的內容值會被指派到ng-model-->
<div
ng-init="location='Taiwan'">
<select ng-model="location">
<option value="USA">USA</option>
<option value="Taiwan">Taiwan</option>
<option value="Others">Others</option>
</select>
</div>
動態下拉選單<br
/>
<div>
<!--ng-options支援動態生成選項-->
<!--此處c.id表示下拉選單的value、c.label表示下拉選單的顯示item-->
<!--有三種寫法：
1. labelValue for item
in array
2. modelValue as
labelValue for item in array
3. modelValue as
labelValue group by groupValue for item in array
-->
<select ng-model="ctrl.selectedSportId"
ng-options="c.id
as c.label for c in ctrl.sports"></select><br/>
Selected Sport: {{ctrl.selectedSportId}}
</div>
<script
type="text/javascript">
angular.module('notesApp',
[])
.controller('MainCtrl',
[function
() {
var
self = this;
self.sports = [
{ id: 1, label: 'Basketball', selected: 'YES'
},
{ id: 2, label: 'Trekking', selected: 'NO'
},
{ id: 3, label: 'Soccer', selected: 'NO'
},
{ id: 4, label: 'Swimming', selected: 'YES'
}, ];
}]);
</script>
</body>
</html>
執行結果
沒有留言:
張貼留言