2014年8月28日 星期四

AngularJS:$timeout



條款閱讀
...................................................................................................

範例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>

沒有留言:

張貼留言