javascript - angular自定义指令中需要取出部分数据提交到后台,这部分数据怎么取出来?
问题描述
接触angular有一段时间了,现在项目中有用到一个时间选择的控件,我就自己写了一个,现在想要进行封装成一个自定义指令,方便使用,也是第一次写指令。样子想要做成
这个样子。
html:
<div class="co-timepicker-box" style="margin-left: 15px">
<input type="text" class="fl wi-timepicker-timeinput" ng-model="hour" maxlength="2">
<div class="fl wi-timepicker-change-box">
<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(1)"></div>
<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(1)"></div>
</div>
<div class="fl wi-timepicker-maohao">
:
</div>
<input type="text" class="fl wi-timepicker-timeinput" ng-model="minute" maxlength="2">
<div class="fl wi-timepicker-change-box">
<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(2)"></div>
<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(2)"></div>
</div>
</div>
css
.co-timepicker-box {
float: left;
width: 110px;
height: 32px;
border: 1px solid #cccccc;
}
.fl{
float: left;
}
.wi-timepicker-timeinput{
width: 35px;
height: 30px;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 30px;
border:0;
outline: none;
/*background-color: lightgrey;*/
}
.wi-timepicker-change-box{
width: 15px;
height: 30px;
border:0;
}
.wi-timepicker-change-time{
width: 15px;
height: 15px;
border: 0;
}
.wi-timepicker-maohao{
width: 7px;
height: 30px;
font-size: 16px;
text-align: center;
line-height: 30px;
}
.arrow-up{
background: url("../img/time-up.png")no-repeat center center;
background-size: 14px 6px;
}
.arrow-down{
background: url("../img/time-down.png")no-repeat center center;
background-size: 14px 6px;
}
js:
/**
* @return {string}
*/
scope.PrefixInteger = function (num, n) {
return (Array(n).join(0) + num).slice(-n);
};
//--------------------------------------
if(!scope.hour){
scope.hour = 12;
}
if(!scope.minute){
scope.minute = '00';
}
var reg=/^\d+$/;
scope.timeUp = function (type) {
if(type == 1){
if(reg.test(scope.hour)){
if(parseInt(scope.hour) >=0 && parseInt(scope.hour) <= 23){
if(scope.hour == 23){
scope.hour = -1;
}
scope.hour = parseInt(scope.hour) + 1;
}else {
scope.hour = 12;
}
}else {
scope.hour = 12;
}
scope.hour = scope.PrefixInteger(scope.hour,2);
}else if(type == 2){
if(angular.isNumber(scope.minute) || reg.test(scope.minute)){
if(parseInt(scope.minute) >=0 && parseInt(scope.minute) <=59){
if(scope.minute == 59){
scope.minute = -1;
}
scope.minute = parseInt(scope.minute) + 1;
}else {
scope.minute = 0;
}
}else {
scope.minute = 0;
}
scope.minute = scope.PrefixInteger(scope.minute,2);
}
};
scope.timeDown = function (type) {
if(type == 1){
if(angular.isNumber(scope.hour) || reg.test(scope.hour)){
if(parseInt(scope.hour) >=0 && parseInt(scope.hour) <=24){
if(scope.hour == 0){
scope.hour = 24;
}
scope.hour = parseInt(scope.hour) - 1;
}else {
scope.hour = 12;
}
}else {
scope.hour = 12;
}
scope.hour = scope.PrefixInteger(scope.hour,2)
}else if(type == 2){
if(angular.isNumber(scope.minute) || reg.test(scope.minute)){
if(parseInt(scope.minute) >=0 && parseInt(scope.minute) <=60){
if(scope.minute == 0){
scope.minute = 60;
}
scope.minute = parseInt(scope.minute) - 1;
}else {
scope.minute = 0;
}
}else {
scope.minute = 0;
}
scope.minute = scope.PrefixInteger(scope.minute,2);
}
};
封装的时候,我就先一股脑的塞到一个指令里
var appDirectives = angular.module('appDirectives', []);
appDirectives.directive('tltimePicker', function() {
return {
restrict : 'AE',
replace : true,
template:
'<div class="co-timepicker-box" style="margin-left: 15px">'+
'<input type="text" class="fl wi-timepicker-timeinput" ng-model="hour" maxlength="2">'+
'<div class="fl wi-timepicker-change-box">'+
'<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(1)"></div>'+
'<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(1)"></div>'+
' </div>'+
'<div class="fl wi-timepicker-maohao">'+
':'+
'</div>'+
'<input type="text" class="fl wi-timepicker-timeinput" ng-model="minute" maxlength="2">'+
'<div class="fl wi-timepicker-change-box">'+
'<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(2)"></div>'+
'<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(2)"></div>'+
'</div></div>',
link : function(scope,element,attrs) {
/**
* @return {string}
*/
scope.PrefixInteger = function (num, n) {
return (Array(n).join(0) + num).slice(-n);
};
if(!scope.hour){
scope.hour = 12;
}
if(!scope.minute){
scope.minute = '00';
}
var reg=/^\d+$/;
scope.timeUp = function (type) {
if(type == 1){
if(reg.test(scope.hour)){
if(parseInt(scope.hour) >=0 && parseInt(scope.hour) <= 23){
if(scope.hour == 23){
scope.hour = -1;
}
scope.hour = parseInt(scope.hour) + 1;
}else {
scope.hour = 12;
}
}else {
scope.hour = 12;
}
scope.hour = scope.PrefixInteger(scope.hour,2);
}else if(type == 2){
if(angular.isNumber(scope.minute) || reg.test(scope.minute)){
if(parseInt(scope.minute) >=0 && parseInt(scope.minute) <=59){
if(scope.minute == 59){
scope.minute = -1;
}
scope.minute = parseInt(scope.minute) + 1;
}else {
scope.minute = 0;
}
}else {
scope.minute = 0;
}
scope.minute = scope.PrefixInteger(scope.minute,2);
}
};
scope.timeDown = function (type) {
if(type == 1){
if(angular.isNumber(scope.hour) || reg.test(scope.hour)){
if(parseInt(scope.hour) >=0 && parseInt(scope.hour) <=24){
if(scope.hour == 0){
scope.hour = 24;
}
scope.hour = parseInt(scope.hour) - 1;
}else {
scope.hour = 12;
}
}else {
scope.hour = 12;
}
scope.hour = scope.PrefixInteger(scope.hour,2)
}else if(type == 2){
if(angular.isNumber(scope.minute) || reg.test(scope.minute)){
if(parseInt(scope.minute) >=0 && parseInt(scope.minute) <=60){
if(scope.minute == 0){
scope.minute = 60;
}
scope.minute = parseInt(scope.minute) - 1;
}else {
scope.minute = 0;
}
}else {
scope.minute = 0;
}
scope.minute = scope.PrefixInteger(scope.minute,2);
}
};
}
};
});
这样在页面使用 <tltime-Picker></tltime-Picker>
是可以实现的,但是现在需要把小时和分钟取出来,提交到后台,所以想加上一个ng-model之类的,但是不知道该怎么办了。。。查阅了好多资料之后,发现还是没有解决问题的,身边也没有对这个擅长的小伙伴,所以才发出来问下大家,有什么思路可以指导下的,麻烦指导指导。我是angular新人,希望大神看到问题觉得太弱鸡的不要太介意。谢谢了
在昨晚经过对指令基础学习之后,今天早上勉强算是弄出来人生第一个指令了,糙是糙了点,但是能用就可以了。昨天遇到的问题是一直取不到值,其实就是想把小时和分钟单独拿出来给个值来绑定,便于在页面点击下一步之类的时候,可以获取到选择的时间,然后发送给后台,上面的大神说的挺切题的额,就是需要研究下指令的scope。我研究了之后,发现其实写起来并不是很难,需要改动的东西也不是很多,直接在指令中加入
scope:{
hour:'=',
minute:'='
},
然后在页面上使用的时候加上
<co-timepicker hour="hour" minute="minute"></co-timepicker>
就可以直接在控制器中获取小时和分钟了。我把完整的代码贴一下吧,便于将来有谁会用到。当然,要是代码有问题,希望大家也指出来,让我学习一下。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular-timepicker</title>
<script src="lib/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/timepicker.css">
<script src="js/timepicker.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TimepickerDemoCtrl">
<co-timepicker hour="hour" minute="minute"></co-timepicker>
<button ng-click="getInfo()">获取时间</button>
</div>
</body>
</html>
css:
/* timepicker start */
.co-timepicker-box {
float: left;
width: 110px;
height: 32px;
border: 1px solid #cccccc;
}
.fl{
float: left;
}
.wi-timepicker-timeinput{
width: 35px;
height: 30px;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 30px;
border:0;
outline: none;
/*background-color: lightgrey;*/
}
.wi-timepicker-change-box{
width: 15px;
height: 30px;
border:0;
}
.wi-timepicker-change-time{
width: 15px;
height: 15px;
border: 0;
}
.wi-timepicker-maohao{
width: 7px;
height: 30px;
font-size: 16px;
text-align: center;
line-height: 30px;
}
.arrow-up{
background: url("../img/time-up.png")no-repeat center center;
background-size: 14px 6px;
}
.arrow-down{
background: url("../img/time-down.png")no-repeat center center;
background-size: 14px 6px;
}
/* timepicker end */
js:
/**
* Created by apple on 17/1/11.
*/
var app = angular.module('myApp', []);
app.controller('TimepickerDemoCtrl',function ($scope) {
$scope.getInfo = function () {
console.log($scope.hour+':'+$scope.minute);
alert('当前选择时间为'+$scope.hour+':'+$scope.minute)
};
});
app.directive("coTimepicker", function() {
return {
restrict:'AE',
scope:{
hour:'=',
minute:'='
},
template:'<div class="co-timepicker-box" style="margin-left: 15px">'+
'<input type="text" class="fl wi-timepicker-timeinput" ng-model="hour" maxlength="2">' +
'<div class="fl wi-timepicker-change-box">' +
'<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(1)"></div>' +
'<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(1)"></div>' +
'</div>' +
'<div class="fl wi-timepicker-maohao">' +
':' +
'</div>' +
'<input type="text" class="fl wi-timepicker-timeinput" ng-model="minute" maxlength="2">' +
'<div class="fl wi-timepicker-change-box">' +
'<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(2)"></div>' +
'<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(2)"></div>' +
'</div>'+
'</div>',
link: function ($scope,element,attrs) {
$scope.PrefixInteger = function (num, n) {
return (Array(n).join(0) + num).slice(-n);
};
//--------------------------------------
if(!$scope.hour){
$scope.hour = 12;
}
if(!$scope.minute){
$scope.minute = '00';
}
var reg=/^\d+$/;
$scope.timeUp = function (type) {
if(type == 1){
if(reg.test($scope.hour)){
if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <= 23){
if($scope.hour == 23){
$scope.hour = -1;
}
$scope.hour = parseInt($scope.hour) + 1;
}else {
$scope.hour = 12;
}
}else {
$scope.hour = 12;
}
$scope.hour = $scope.PrefixInteger($scope.hour,2);
}else if(type == 2){
if(angular.isNumber($scope.minute) || reg.test($scope.minute)){
if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=59){
if($scope.minute == 59){
$scope.minute = -1;
}
$scope.minute = parseInt($scope.minute) + 1;
}else {
$scope.minute = 0;
}
}else {
$scope.minute = 0;
}
$scope.minute = $scope.PrefixInteger($scope.minute,2);
}
};
$scope.timeDown = function (type) {
if(type == 1){
if(angular.isNumber($scope.hour) || reg.test($scope.hour)){
if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <=24){
if($scope.hour == 0){
$scope.hour = 24;
}
$scope.hour = parseInt($scope.hour) - 1;
}else {
$scope.hour = 12;
}
}else {
$scope.hour = 12;
}
$scope.hour = $scope.PrefixInteger($scope.hour,2)
}else if(type == 2){
if(angular.isNumber($scope.minute) || reg.test($scope.minute)){
if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=60){
if($scope.minute == 0){
$scope.minute = 60;
}
$scope.minute = parseInt($scope.minute) - 1;
}else {
$scope.minute = 0;
}
}else {
$scope.minute = 0;
}
$scope.minute = $scope.PrefixInteger($scope.minute,2);
}
};
}
}
});
这样写完之后页面的效果是这样的
点击获取时间按钮,可以在控制台获取到时间,也有提示框出来
默认是12:00,点击上下按钮,可以换时间。再点击获取时间按钮,就可以得到你选择的时间了:
这样这个问题算是基本解决。希望看了的小伙伴们要是有疑问或者看到错误可以指正。共同学习!
这篇关于javascript - angular自定义指令中需要取出部分数据提交到后台,这部分数据怎么取出来?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!