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网站开发基础总结《五》
开始本篇总结之前,首先聊一聊上一篇中存在的一点小问题,上上篇总结数据库创建表时,存在一个问题,name.year.form好像属于关键字,不能做为表的属性,所以大家注意一下,在创建表时保证表的属性不存 ...
- Oracle Dataguard之物理standby的基本配置
尽管网上有很多Oracle Dataguard的配置教程,但不难发现,很多采用的是rman duplicate这种方法,尽管此种方法较为简便.但在某种程度上,却也误导了初学者,虽说也能配置成功,但只知 ...
- Mac下如何配置环境变量
以前都是在Windows平台上开发,在配置一些框架的时候,为了能够在命令行中调用,一般都会配置bin目录到环境变量中,这是为了让命令行在执行的时候,能够查找到对应的执行文件. 现在工作使用Mac,配置 ...
- Elasticsearch 连接查询
在一般的关系型数据库中,都支持连接操作. 在ES这种分布式方案中进行连接操作,代价是十分昂贵的. 不过ES也提供了相类似的操作,支持水平任意扩展,实现连接的效果. 其他内容,参考Elasticsear ...
- StreamHelper
public static MemoryStream CreateMemoryStreamFromBytes(byte[] inputData) { if (inputData == null || ...
- ios基础之 透过页面跳转来认识 Strong 与 Weak
最近在自己做一个小程序,遇到了页面跳转的问题,然后上网一通乱搜,跳转的问题解决了,又有传值的问题.上面两个问题解决了,又发现内存比刚开始时多占用了2M,于是,各种内心纠结,想彻底 搞清楚strong ...
- VS2015 新Web项目(C#6)出现CS1617错误的解决
VS2015新增了对C#6的支持. 在新的Web项目模板中通过引入nuget包Microsoft.CodeDom.Providers.DotNetCompilerPlatform:1.0.0并在web ...
- XML基础学习02<linq to xml>
Linq to XML的理解 1:这是一种比较好的操作Xml的工具. àXDocument 文档 àXElement 元素 àXAttribute 属性 àXText 文本 2:这里还是和我们之前创建 ...
- win10 服务（系统默认服务）注册表
---恢复内容开始--- Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services] ...
- MVC 4.0 学习中遇到的bug
1.0 _ViewStart.cshtml _ViewStart.cshtml 里面的如果写了 <script src="/Scripts/jquery-1.8.2.js" ...