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 ...
随机推荐
- HTML的16个全局属性
前面的话 在HTML中,属性能表达相当丰富的语义,而且属性也会额外提供很多实用的功能,HTML共支持16个常见的全局属性. HTML原有属性 accesskey 作用:浏览器用来创建激活或聚焦元素的快 ...
- 如何用分析函数找出EMP表中每个部门工资最高的员工
EMP表是Oracle测试账户SCOTT中的一张雇员表,首先,我们来看看emp表的数据 SQL> select * from emp; EMPNO ENAME JOB MGR HIREDATE ...
- Java 集合系列目录(Category)
下面是最近总结的Java集合(JDK1.6.0_45)相关文章的目录. 01. Java 集合系列01之 总体框架 02. Java 集合系列02之 Collection架构 03. Java 集合系 ...
- Dijkstra算法(一)之 C语言详解
本章介绍迪杰斯特拉算法.和以往一样,本文会先对迪杰斯特拉算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 迪杰斯特拉算法介绍 2. 迪杰斯特拉算法 ...
- Python编码问题整理
认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...
- Linux 启动过程分析
本文仅简单介绍Linux的启动过程,在此基础上做简要的分析.对于Linux启动过程中内部详细的函数调用不做介绍,只是希望本文能给新手起到一个抛砖引玉的作用,以便深入研究Linux的启动过程.下图基本展 ...
- SQL Server在执行SQL语句时，表之间驱动顺序对性能的影响
环境:SQL Server2012 SP3 企业版,开发服务器,并没有什么负载,全库索引统一Rebuild过 经反复执行验证过, 不算太复杂的SQL(存储过程中代入参数抠出来的SQL代码) 默认情况下 ...
- android布局文件中android:icon="?attr/menuIconCamera"找不到对应图标路径
如 <item android:id="@+id/camera" android:title="Camera" android:icon="?a ...
- js中页面刷新和页面跳转的方法总结
.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...
- Windows Azure Web Site (11) 使用源代码管理器管理Azure Web Site
<Windows Azure Platform 系列文章目录> 熟悉Azure Web Site平台的读者都知道,我们可以通过FTP等方式,把本地的Web Application部署到微软 ...