angular——倒计时

       <div class="top_10 input_box">
                <label class="item item-input">
                    <i class="icon ion-chatbubble-working placeholder-icon"></i>
                    <input type="tel" placeholder="请输入短信验证码" autofocus ng-model="data.verifyMessage">
                </label>

                <input type="button" class="button retrieve font_16_14 button-calm white_text"
                       ng-disabled="data.retrieveDisabled"
                       ng-value="data.retrieveText" ng-model="data.retrieveText" ng-click="action.retrieve()">
            </div>
angular.module('MrTrustApp.controllers')

    .controller('AuthSendVerifyMessageCtrl', function ($scope, StateGo, $stateParams, $interval, $ionicLoading, $timeout) {

        //定义数据
        $scope.data = {

            retrieveDisabled: true,   //从新获取按钮默认不可用

            isChecked: true,         //接受协议默认勾选

            disabled: true,         //注册/登陆按钮默认不可用

            retrieveText: '从新获取(59s)', //从新获取倒计时文字

            isLogin: false         //true:登陆 , false:注册 (是否为登陆)

        };

//显示号码部分数字
        $scope.data.showPhoneNumber = phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
//倒计时样式控制
        function countdown() {
            var second = 59,
                timePromise = undefined;

            timePromise = $interval(function () {
                if (second < 1) {

                    $scope.data.retrieveDisabled = false;

                    $interval.cancel(timePromise);
                    timePromise = undefined;

                    $scope.data.retrieveText = "从新获取";
                    second = 59;

                } else {
                    $scope.data.retrieveText = '从新获取(' + second + 's)';

                    second--;

                    $scope.data.retrieveDisabled = true;


                }
            }, 1000, 100);
        }

        countdown();


        //从新获取验证码
        $scope.action.retrieve = function () {
            countdown();
            return false;
            <!--  TODO: 告诉后台,给用户发送验证码   -->

        };
});
相关文章
相关标签/搜索