angularJs , json，html片段，bootstrap timepicker angular
css
.demotest {
width: %;
height: auto;
overflow: auto;
position: relative;
margin: auto;
margin-top: 50px;;
}
.mgt20{
margin-top: 20px;;
}
.timepicker{
background: url("../img/timepicker-icon.png") no-repeat % %;
}
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!--angular-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-animate.min.js"></script>
<!--plugin loadingbar-->
<script src="libs/plugin/loading/loading-bar.min.js"></script>
<link rel="stylesheet" href="libs/plugin/loading/loading-bar.min.css">
<!--bootstrap-->
<link rel="stylesheet" href="libs/bootstrap.min.css">
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap.min.js"></script>
<!--plugin timepicker new-->
<link rel="stylesheet" href="libs/plugin/timepicker/timepickerNew/datetimepicker.css">
<script src="libs/plugin/timepicker/timepickerNew/moment.js"></script>
<script src="libs/plugin/timepicker/timepickerNew/datetimepicker.js"></script>
<script src="libs/plugin/timepicker/timepickerNew/datetimepicker.templates.js"></script>
<!--app-->
<link rel="stylesheet" href="css/css.css">
<script src="../app.js"></script>
</head>
<body ng-app="compileExample" ng-controller="GreeterController">
<div id="loading-bar-container"></div> <form action="" class="form-horizontal" role="form">
<div class="form-group" style="width:98%">
<div ng-repeat="demo_data in demo_data">
<label class="col-md-1 control-label mgt20">{{demo_data.title}}</label>
<div class="col-md-3 mgt20">
<div compile="html[$index]"></div>
</div>
</div>
</div>
</form> <div class="table-responsive" style="margin-top: 100px;">
<table class="table">
<thead>
<tr ng-repeat="tableH in tableH">
<th>
<input type="checkbox" ng-model="isChecked" ng-click="check()" >
</th>
<th>{{tableH.tHone}}</th>
<th>{{tableH.tHtwo}}</th>
<th>{{tableH.tHthree}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tableD in tableD">
<td>
<input type="checkbox" ng-model="hasChecked[$index]">
</td>
<th>{{tableD.trone}}</th>
<th>{{tableD.trtwo}}</th>
<th>{{tableD.trthree}}</th>
</tr>
</tbody>
</table>
</div> </body>
</html>
json
{
"demo_data": [
{
"title": "时间开始",
"dom": "<div class='dropdown'><a class='dropdown-toggle my-toggle-select' id='dLabel' role='button' data-toggle='dropdown' data-target='#' href=''><div class='input-append'><input type='text' class='input-large form-control timepicker' readOnly data-ng-model=\"data.date | date:'yyyy-MM-dd HH:mm'\"><span class='add-on'><i class='icon-calendar'></i></span></div></a><ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'><datetimepicker data-ng-model='data.date' data-datetimepicker-config=\"{ dropdownSelector: '.my-toggle-select' }\"></datetimepicker></ul></div>"
},
{
"title": "至",
"dom": "<div class='dropdown'><a class='dropdown-toggle my-toggle-select' id='dLabel' role='button' data-toggle='dropdown' data-target='#' href=''><div class='input-append'><input type='text' class='input-large form-control timepicker' readOnly data-ng-model=\"data.date | date:'yyyy-MM-dd HH:mm'\"><span class='add-on'><i class='icon-calendar'></i></span></div></a><ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'><datetimepicker data-ng-model='data.date' data-datetimepicker-config=\"{ dropdownSelector: '.my-toggle-select' }\"></datetimepicker></ul></div>"
},
{
"title": "名称名3",
"dom": "<div><input type='text'class='form-control' ng-model='test'></div>"
},
{
"title": "名称名4",
"dom": "<select name='' id='' class='form-control'><option value='' >请选择</option><option value=''>1</option><option value=''>2</option><option value=''>3</option></select>"
},
{
"title": "名称名5",
"dom": "<input type='button'ng-click='hello()' value='hello' class='btn'>"
}
],
"tableD": [
{
"trone": "",
"trtwo": "NAMENAME",
"trthree": ""
},
{
"trone": "",
"trtwo": "NAMENAME",
"trthree": ""
},
{
"trone": "",
"trtwo": "NAMENAME",
"trthree": ""
},
{
"trone": "",
"trtwo": "NAMENAME",
"trthree": ""
}
],
"tableH": [
{
"tHone": "HLLOWORLD1",
"tHtwo": "HLLOWORLD2",
"tHthree": "HLLOWORLD3"
}
]
}
app.js
angular.module('compileExample', ['chieffancypants.loadingBar', 'ngAnimate','ui.bootstrap.datetimepicker'], function ($compileProvider) {
// complie
$compileProvider.directive('compile', function ($compile) {
return function (scope, element, attrs) {
scope.$watch(
function (scope) {
return scope.$eval(attrs.compile);
},
function (value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
});
})
// loadingBar
.config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = true;
cfpLoadingBarProvider.spinnerTemplate = '<div>Loading...</div>';
}])
.controller('GreeterController', ['$scope', '$timeout', '$http', 'cfpLoadingBar', function ($scope, $timeout, $http, cfpLoadingBar) {
$scope.start = function () {
cfpLoadingBar.start();
};
$scope.complete = function () {
cfpLoadingBar.complete();
};
cfpLoadingBar.start();
$http.post("http://localhost:63342/demoLoading2/demoLoading2/json/demo.json")
.success(function (data) {
$scope.complete();
$timeout(function () {
// select
$scope.demo_data = data.demo_data;
$scope.tableH = data.tableH;
$scope.tableD = data.tableD;
$scope.demo_data_dom_arr = [];
angular.forEach($scope.demo_data, function (data, index, array) {
$scope.demo_data_dom_arr[index] = array[index].dom;
console.log($scope.demo_data_dom_arr[index]);
});
$scope.html = $scope.demo_data_dom_arr;
// table checkall
$scope.hasChecked = [];
$scope.check = function(){
if($scope.hasChecked.length==$scope.tableD.length){
var tmp = $scope.hasChecked.join('');
if(!tmp.indexOf('true')&&!tmp.lastIndexOf('true')&&!tmp.replace(/true/g,'')&&$scope.isChecked) return;
else{
if($scope.isChecked)
checkAll();
else
$scope.hasChecked = [];
}
}else
checkAll();
}
var checkAll = function(){
$scope.hasChecked = [];
for(var i in $scope.tableD)
$scope.hasChecked.push(true);
}
}, );
})
.error(function () {
console.log("post error !");
});
// test ng-click ng-model
$scope.hello = function () {
alert('hello')
}
$scope.test = "test";
}])
//
.directive('bsDatetimepicker', [
'$timeout',
'$strapConfig',
function ($timeout, $strapConfig) {
var isAppleTouch = /(iP(a|o)d|iPhone)/g.test(navigator.userAgent);
var regexpMap = function regexpMap(language) {
language = language || 'en';
return {
'/': '[\\/]',
'-': '[-]',
'.': '[.]',
' ': '[\\s]',
'dd': '(?:(?:[0-2]?[0-9]{1})|(?:[3][01]{1}))',
'd': '(?:(?:[0-2]?[0-9]{1})|(?:[3][01]{1}))',
'mm': '(?:[0]?[1-9]|[1][012])',
'm': '(?:[0]?[1-9]|[1][012])',
'DD': '(?:' + $.fn.datetimepicker.dates[language].days.join('|') + ')',
'D': '(?:' + $.fn.datetimepicker.dates[language].daysShort.join('|') + ')',
'MM': '(?:' + $.fn.datetimepicker.dates[language].months.join('|') + ')',
'M': '(?:' + $.fn.datetimepicker.dates[language].monthsShort.join('|') + ')',
'yyyy': '(?:(?:[1]{1}[0-9]{1}[0-9]{1}[0-9]{1})|(?:[2]{1}[0-9]{3}))(?![[0-9]])',
'yy': '(?:(?:[0-9]{1}[0-9]{1}))(?![[0-9]])'
};
};
var regexpForDateFormat = function regexpForDateFormat(format, language) {
var re = format, map = regexpMap(language), i;
i = ;
angular.forEach(map, function (v, k) {
re = re.split(k).join('${' + i + '}');
i++;
});
i = ;
angular.forEach(map, function (v, k) {
re = re.split('${' + i + '}').join(v);
i++;
});
return new RegExp('^' + re + '$', ['i']);
};
return {
restrict: 'A',
require: '?ngModel',
link: function postLink(scope, element, attrs, controller) {
var options = angular.extend({ autoclose: true }, $strapConfig.datetimepicker || {}), type = attrs.dateType || options.type || 'date';
angular.forEach([
'format',
'formatType',
'weekStart',
'calendarWeeks',
'startDate',
'endDate',
'daysOfWeekDisabled',
'autoclose',
'startView',
'minViewMode',
'todayBtn',
'todayHighlight',
'keyboardNavigation',
'language',
'forceParse',
'linkFormat',
'linkField',
'todayHighlight'
], function (key) {
if (angular.isDefined(attrs[key]))
options[key] = attrs[key];
});
var language = options.language || 'en',
format = isAppleTouch ? 'yyyy-mm-dd hh:mm' : (attrs.dateFormat || options.format || $.fn.datetimepicker.dates[language] && $.fn.datetimepicker.dates[language].format || 'mm/dd/yyyy hh:mm'),
formatType = attrs.formatType || options.formatType || 'standard',
linkFormat = attrs.linkFormat || options.format,
dateFormatRegexp = regexpForDateFormat(format, language);
if (controller) {
controller.$formatters.unshift(function (modelValue) {
return type === 'date' && angular.isString(modelValue) && modelValue ? $.fn.datetimepicker.DPGlobal.parseDate(modelValue, $.fn.datetimepicker.DPGlobal.parseFormat(linkFormat, formatType), language) : modelValue;
});
controller.$parsers.unshift(function (viewValue) {
if (!viewValue) {
controller.$setValidity('date', true);
return null;
} else if (type === 'date' && angular.isDate(viewValue)) {
controller.$setValidity('date', true);
return viewValue;
} else if (angular.isString(viewValue) && dateFormatRegexp.test(viewValue)) {
controller.$setValidity('date', true);
if (isAppleTouch)
return new Date(viewValue);
return type === 'string' ? viewValue : $.fn.datetimepicker.DPGlobal.parseDate(viewValue, $.fn.datetimepicker.DPGlobal.parseFormat(format), language);
} else {
controller.$setValidity('date', false);
return undefined;
}
});
controller.$render = function ngModelRender() {
if (isAppleTouch) {
var date = controller.$viewValue ? $.fn.datetimepicker.DPGlobal.formatDate(controller.$viewValue, $.fn.datetimepicker.DPGlobal.parseFormat(format), language) : '';
element.val(date);
return date;
}
if (!controller.$viewValue)
element.val('');
return element.datetimepicker('update', controller.$viewValue);
};
}
if (isAppleTouch) {
element.prop('type', 'date').css('-webkit-appearance', 'textfield');
} else {
if (controller) {
element.on('changeDate', function (ev) {
scope.$apply(function () {
if (type === 'string') {
controller.$setViewValue(element.val());
} else {
var fixUtc = new Date(ev.date.valueOf());
fixUtc.setHours(fixUtc.getUTCHours()); // fix for datetimepicker which
controller.$setViewValue(fixUtc);
}
});
});
}
element.addClass("date");
element.datetimepicker(angular.extend(options, {
format: format,
language: language
}));
scope.$on('$destroy', function () {
var datetimepicker = element.data('datetimepicker');
if (datetimepicker) {
datetimepicker.picker.remove();
element.data('datetimepicker', null);
}
});
attrs.$observe('startDate', function (value) {
element.datetimepicker('setStartDate', value);
});
attrs.$observe('endDate', function (value) {
element.datetimepicker('setEndDate', value);
});
}
var component = element.siblings('[data-toggle="datetimepicker"]');
if (component.length) {
component.on('click', function () {
if (!element.prop('disabled')) {
element.trigger('focus');
}
});
}
}
};
}
]);
angularJs , json，html片段，bootstrap timepicker angular的更多相关文章
- bootstrap timepicker 在angular中取值赋值 并转化为时间戳
上一篇我们讲到angular对于timepicker的一个封装后的插件angular-bootstrap-timepicker,但是由于angular的版本必须是v1.2.30以上的.对于有些涉及到多 ...
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- angular bootstrap timepicker TypeError: Cannot set property '$render' of undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- [AngularJS] Consistency between ui-router states and Angular directives
ui-router's states and AngularJS directives have much in common. Let's explores the similarities bet ...
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
When you implement a search bar, the user can make several different queries in a row. With a Promis ...
- 【angular+bootstrap】angular初级的时间选择器
近期的一个项目,是用angular来写的,本来框架就是第一次接触,使用相关插件的时候就感觉更加没有头绪了,其中一个插件就是时间选择器.比较好用时间选择器就是bootstrap里面的datetimepi ...
- Angular Js 与bootstrap， angular 与 vue.js
今天突然接到电话, 问我他们的区别 虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.an ...
随机推荐
- 正则表达式之JSP、Android
对于正则表达式,很多朋友一定不陌生,因为在我们做网站或apk时,当需要用户提交表单时,很多时间需要判断用户的输入是否合法,这个时间正则表达式就可以发挥它的作用了,我们知道正则表达式在这个方面是很强大的 ...
- CentOS安装运行NodeJS框架Express
安装依赖包 yum -y install gcc make gcc-c++ openssl-devel wget 下载/解压NodeJs wget http://nodejs.org/dist/v0. ...
- c#事件与委托
C#.net 目录(?)[-] 将方法作为方法的参数 将方法绑定到委托 事件的由来 事件和委托的编译代码 委托事件与Observer设计模式 范例说明 Observer设计模式简介 实现范例的Obse ...
- Visual Studio 2010安装教程
VS2010是一个集C++,VB,C#,等编程环境于一身的集成开发环境,功能强大,能有效提高编程效率.针对 Visual Studio 2010 完全重新设计了帮助查看器.您可以使用首选的 Web 浏 ...
- G++ 参数介绍(转载)
g++参数介绍 From: http://www.cnblogs.com/lidan/archive/2011/05/25/2239517.html gcc and g++分别是gnu的c & ...
- 【转】FastCgi与PHP-fpm关系
刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少. 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...
- MVC知识进阶01
下面是在项目中有关于MVC的知识总结,有些地方若不对,请指出. 一:MVC的基本知识 1 名词解释 *惯例优先原则<约定大于配置>:是一种开发设计模式,说是在项目里面使用事先规定的命 ...
- Add和AddRange的区别
Add和AddRange区别 Add和AddRange Add:将指定的对象添加到……中 AddRange:向……末尾,添加数组 - 在群体操作时,使用AddRange取代Add 用AddRange可 ...
- Wamp 简单使用方法
1.在wamp的安装目录 \bin\apache\Apache2.4.4\conf 中找到 httpd.conf文件删除 Include conf/extra/httpd-vhosts.conf 这 ...
- Web API应用架构在Winform混合框架中的应用（1）
在<Web API应用架构设计分析(1)>和<Web API应用架构设计分析(2)>中对WebAPI的架构进行了一定的剖析,在当今移动优先的口号下,传统平台都纷纷开发了属于自己 ...