條款閱讀
...................................................................................................
...................................................................................................
範例DEMO及程式碼：http://jsbin.com/dayir/3/edit
一、View設計
<body ng-app="timeoutApp" ng-controller="timeoutCtrl" style="background-color:#CCC">
<div class="isa_info" style="margin-bottom:20px;background-color:white;width: 50%;margin-left: 25%" >
條款閱讀<br />
<span ng-repeat="n in []| range:10">
...................................................................................................<br />
</span>
</div>
<button id="agreeBtn" class="button blue" ng-click="agree()" style="margin-left: 48%;background-color: #CCC;color:white" ng-init="showText = '同意(10)'" ng-disabled="isEnabled"> {{showText}}</button>
</body>
(一)利用ng-repeat屬性將內文延展
(二)button部分則使用ng-init來設定初始文字，並設定disabled屬性來使倒數中不能對按鈕進行動做，而當按鈕能點擊時則利用ng-click屬性進行相對應事件。
二、Controller設計
<script language="javascript">
var timeoutApp = angular.module('timeoutApp', []).controller('timeoutCtrl', function($scope, $timeout,$window) {
$scope.counter = 10;
$scope.isEnabled = true;
$scope.onTimeout = function() {
$scope.counter--;
if ($scope.counter <= 0) {
$timeout.cancel(mytimeout);
$scope.isEnabled = false;
$scope.showText = "同意";
document.getElementById('agreeBtn').style["background-color"]="#269CE9";
return;
}
$scope.showText = "同意(" + $scope.counter + ")";
mytimeout = $timeout($scope.onTimeout, 1000);
};
var mytimeout = $timeout($scope.onTimeout, 1000);
$scope.agree = function() {
alert("謝謝您的使用");
$scope.showText = "同意(10)";
$scope.counter = 10;
$scope.isEnabled = true;
document.getElementById('agreeBtn').style["background-color"]="#CCC";
mytimeout = $timeout($scope.onTimeout, 1000);
};
});
timeoutApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++)
input.push(i);
return input;
};
});
</script>
(一)利用$timeout來達成倒數計時功能，且加入判斷條件，當秒數小於等於0時則使按鈕能夠點擊。
三、完整程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/button.css"></link>
<link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/barAndInfo.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AngularJS_timeout</title>
<script language="javascript">
var timeoutApp = angular.module('timeoutApp', []).controller('timeoutCtrl', function($scope, $timeout,$window) {
$scope.counter = 10;
$scope.isEnabled = true;
$scope.onTimeout = function() {
$scope.counter--;
if ($scope.counter <= 0) {
$timeout.cancel(mytimeout);
$scope.isEnabled = false;
$scope.showText = "同意";
document.getElementById('agreeBtn').style["background-color"]="#269CE9";
return;
}
$scope.showText = "同意(" + $scope.counter + ")";
mytimeout = $timeout($scope.onTimeout, 1000);
};
var mytimeout = $timeout($scope.onTimeout, 1000);
$scope.agree = function() {
alert("謝謝您的使用");
$scope.showText = "同意(10)";
$scope.counter = 10;
$scope.isEnabled = true;
document.getElementById('agreeBtn').style["background-color"]="#CCC";
mytimeout = $timeout($scope.onTimeout, 1000);
};
});
timeoutApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++)
input.push(i);
return input;
};
});
</script>
</head>
<body ng-app="timeoutApp" ng-controller="timeoutCtrl" style="background-color:#CCC">
<div class="isa_info" style="margin-bottom:20px;background-color:white;width: 50%;margin-left: 25%" >
條款閱讀<br />
<span ng-repeat="n in []| range:10">
...................................................................................................<br />
</span>
</div>
<button id="agreeBtn" class="button blue" ng-click="agree()" style="margin-left: 48%;background-color: #CCC;color:white" ng-init="showText = '同意(10)'" ng-disabled="isEnabled"> {{showText}}</button>
</body>
</html>
留言
張貼留言