接著要介紹Angular js的另一個特性Controller。
Controller本身能做的事情大概有二：
1.對scope設置初始值(scope泛指應用程式所使用到的物件模型)
2.在scope上增加額外的處置，簡單來說就是寫程式的區塊。
範例一：
給定初始值，input中會有來自controller的文字。
原始碼：
Demo:
範例二：
定義Methods，在<a>利用ng-click binding method並且利用ng-init設置初始值。
並在Controller中定義method並給定 button ng-click事件。
原始碼：
範例三：
利用Controller定義model並給定初始值，
使用ng-repeat將所有model dump出來。
原始碼
Demo:
範例四：
在Controller中使用$timeout，利用其類似Timer的特性引發timeout事件，
形成倒數效果使得button於timeout後即被block，
除非在該div內有mouseup動作始重新計時。
原始碼：
Demo:
給定初始值，input中會有來自controller的文字。
原始碼：
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<meta charset="utf-8" />
<script type="text/javascript">
//Controller
function urCtrl($scope){
$scope.urName="it was inited from controller";
}
</script>
</head>
<body>
<!-- Smapel ng-controller -->
<div class="box" ng-controller="urCtrl">
Sample ng-controller----------------<br>
Type in ur Name<input name="input" ng-model="urName"><br>
Hi~ {{urName}}!!!!
</div>
</body>
</html>
Demo:
Sample ng-controller----------------
Type in ur Name
Hi~ it was inited from controller!!!!
Type in ur Name
Hi~ it was inited from controller!!!!
範例二：
定義Methods，在<a>利用ng-click binding method並且利用ng-init設置初始值。
並在Controller中定義method並給定 button ng-click事件。
原始碼：
<script type="text/javascript">
//Controller
function ClickCtrl ($scope) {
$scope.map = function(){
$scope.test=$scope.count;
}
}
</script>
<!-- Smapel <a> with ng-click n use ng-init aicltest--> <div class="box" ng-controller="ClickCtrl" >
Sample <a>----------------<br>
<input type="button" ng-click="count = count + 1" ng-init="test=0" value="type to Increment"><br>
<input type="button" ng-click="map()" value="map value"><br>
<!--在{{}}之中定義的model沒有那麼嚴謹，基本上只有用變數，就可以使用。-->
<tt>count: {{test}}</tt><br>
</div>
Demo:
Sample <a>----------------
count: 0
count: 0
範例三：
利用Controller定義model並給定初始值，
使用ng-repeat將所有model dump出來。
原始碼
<script type="text/javascript">
//Controller
function repeatCtrl ($scope) {
$scope.names = ['Lily', 'Lucy', 'Marry', 'John', 'Nana'];
$scope.items = [
{title: 'A', status: '0'},
{title: 'B', status: '1'},
{title: 'C', status: '2'}];
}
</script>
<!-- Smapel ng-repeat with ng-submit-->
<div class="box2" ng-controller="repeatCtrl">
Sample ng-repeat -------------<br>
<tt ng-repeat="name in names">
{{$index+1}}.{{name}}
<span class="error" ng-show="$first">first Data </span>
<span class="error" ng-show="$middle">middle Data </span>
<span class="error" ng-show="$last">last Data </span>
<br>
</tt>
There are {{names.length}} data<br>
<ul>
<li ng-repeat ="item in items">{{item.title}}</li>
</ul>
There are {{items.length}} data<br>
</div>
Demo:
Sample ng-repeat -------------
1.Lily
first Data
middle Data
last Data
2.Lucy
first Data
middle Data
last Data
3.Marry
first Data
middle Data
last Data
4.John
first Data
middle Data
last Data
5.Nana
first Data
middle Data
last Data
There are 5 data
1.Lily
first Data
middle Data
last Data
2.Lucy
first Data
middle Data
last Data
3.Marry
first Data
middle Data
last Data
4.John
first Data
middle Data
last Data
5.Nana
first Data
middle Data
last Data
There are 5 data
- A
- B
- C
範例四：
在Controller中使用$timeout，利用其類似Timer的特性引發timeout事件，
形成倒數效果使得button於timeout後即被block，
除非在該div內有mouseup動作始重新計時。
原始碼：
<script type="text/javascript">
//Controller
//一定要在Controller中寫入timeout變數
function timeoutCtrl($scope,$timeout){
$scope.Timer = 5;
$scope.onTimeout = function(){
if($scope.Timer<=0){
$scope.overtime = true;
$timeout.cancel(mytimeout);
}else{
$scope.Timer--;
}
mytimeout = $timeout($scope.onTimeout,1000);
};
var mytimeout = $timeout($scope.onTimeout,1000);
$scope.Clear=function(){
$scope.Timer = 5;
$timeout.cancel(mytimeout);
$scope.overtime = false;
mytimeout = $timeout($scope.onTimeout,1000);
}
}
</script>
<!-- Sample $timeout -->
<div class="box" ng-controller="timeoutCtrl" ng-mouseup="Clear()">
Sample $timeout ----------------------<br>
After {{Timer}} secs lock button With no Active<br>
<input type="button" ng-disabled="overtime" value ="submit">
</div>
Demo:
Sample $timeout ----------------------
After 5 secs lock button With no Active
沒有留言:
張貼留言