标签:clear 获取 核心 ng-model manage ica one data alt
获取验证码界面效果如图:
需要实现以下逻辑
按钮不可选
--输入电话号码,按钮可选
--点击获取,进入倒计时,按钮不可选
--倒计时结束,回到初识状态
核心代码:
var cd = 60; var toDo = function() { cd--; $scope.countDown = "重新获取 " + cd; }; $interval(toDo, 1000, 60);
完整代码:
html:
<form name="form" class="form-validation"> <div class="list-group list-group-sm"> <div class="list-group-item"> <input type="text" placeholder="phone" class="form-control no-border" ng-model="seller.phone" required> </div> <div class="list-group-item"> <input style="width: 150px;float: left;border: 1px solid #DDD;" type="phone" placeholder="4位验证码" class="form-control no-border" ng-model="seller.verification" required> <button style="width: 150px;float: right;" type="button" class="btn btn-primary btn-block" ng-click="sendVerification()" ng-disabled=‘!seller.phone||send‘ > {{countDown}} </button> <div class="clearfix"></div> </div> <div class="list-group-item"> <input type="password" placeholder="Password" class="form-control no-border" ng-model="seller.password" required> </div> </div> </form>
js:
app.controller(‘SignupFormController‘, [ ‘$interval‘, ‘$scope‘, ‘$http‘, ‘$state‘, function( $interval, $scope, $http, $state) { $scope.countDown = "获取验证码"; $scope.loginmsg=""; $scope.send = false; $scope.sendVerification = function() { $http.post(‘http://localhost:8083/boronManager/seller/verification/‘ + $scope.seller.phone, {verificationType: 1}).then(function(response) { var req = response.data; if(!req.success) $scope.authError = req.error; }, function(x) { $scope.authError = response.data.error; }); var cd = 60; var toDo = function() { $scope.send = true; cd--; if(cd < 0) { cd = ""; $scope.send = false; } $scope.countDown = "重新获取 " + cd; }; $interval(toDo, 1000, 60); }; }]);
标签:clear 获取 核心 ng-model manage ica one data alt
原文地址:http://www.cnblogs.com/Z-Fanghan/p/6769988.html