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 ...
随机推荐
- Mina、Netty、Twisted一起学（十）：线程模型
要想开发一个高性能的TCP服务器,熟悉所使用框架的线程模型非常重要.MINA.Netty.Twisted本身都是高性能的网络框架,如果再搭配上高效率的代码,才能实现一个高大上的服务器.但是如果不了解它 ...
- Linux的学习--crontab
之前了解过一点crontab,前段时间比较闲,就熟悉了一下,今天总结记录一下. crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并 ...
- Android Junit测试框架
对应用进行单元测试: 使用Junit测试框架,是正规Android开发的必用技术.在Junit中可以得到组件,可以模拟发送事件和检测程序处理的正确性. 1.配置指令集和函数库: (1)配置指令集,指定 ...
- Csstyle - 创建简洁、可维护强的 CSS 样式
Csstyle 是一种现代的方式,用于制作精美的可维护样式表.这个 Csstyle 方法使用 SASS 混入,使你的 CSS 更具可读性和语义,并为你生成选择器,自动处理嵌套等事情. Csstyle ...
- 只用一行代码让你的ASP.NET MVC 跑起来
只用一行代码让你的ASP.NET MVC 跑起来 MVC框架一直是企业开发绕不过去的东西,先是JavaEE的 Structs, 然后是 Spring MVC, 再到我们今天要讨论的ASP.NET MV ...
- laravel中的错误与日志
日志 laravel中的日志是基于monolog而封装的.laravel在它上面做了几个事情: 把monolog中的addInfo等函数简化成为了info这样的函数 增加了useFiles和useDa ...
- 7z制作自解压安装包
像7z和winRAR这样的压缩工具都支持制作自解压的文件.所谓自解压的文件就是不需要目标机器上安装解压工具,通过运行压缩包自己即可解压出压缩包中的文件.下面我们就介绍一下如何利用7z的自解压功能制作应 ...
- RAID一个硬盘FAIL。
周六本想清静学习一下,刚把咖啡冲好还没有来得及坐下,机房却传来让人心揪的报警声,原来一台服务器一个硬盘FAIL(挂了...... 抽换好的一个容量大小的SCSI硬盘,再次进入这个介面,选择Force ...
- [小工具]CSS内嵌样式自动提取器
逐行分析,将内联样式提取出来,并自动编号代替的一个小工具软件 注:style=""(此处必须是标准的双引号!) http://files.cnblogs.com/quejuwen/ ...
- Linux下快速设定ip bond
在计算机网路普及的初期,很多OS系统都使用的为单网卡方式,即一个网卡使用一个IP地址.随着网络要求的不断提高,我们可以对多个网卡进行绑定聚合当一个逻辑网络接口来使用,从而大幅提升服务器的网络吞吐(I/ ...