接著要介紹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~ {{urName}}!!!!
Type in ur Name
Hi~ {{urName}}!!!!
範例二：
定義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: {{test}}
count: {{test}}
範例三：
利用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 -------------
{{$index+1}}.{{name}}
first Data
middle Data
last Data
There are {{names.length}} data
{{$index+1}}.{{name}}
first Data
middle Data
last Data
There are {{names.length}} data
- {{item.title}}
範例四：
在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 {{Timer}} secs lock button With no Active
沒有留言:
張貼留言