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 ...
随机推荐
- ab压力测试
原文链接:http://www.orlion.ga/698/ ab是个什么就不说了搞lamp的都会知道.主要看一下结果都是什么意义. ab 的用法是:ab [options] [http://]hos ...
- codeforces B. Pasha and String（贪心）
题意:给定一个长度为len的字符序列,然后是n个整数,对于每一个整数ai, 将字符序列区间为[ai,len-ai+1]进行反转.求出经过n次反转之后的序列! /* 思路1:将区间为偶数次的直接去掉!对 ...
- impdp导入报错ORA-14460: only one COMPRESS or NOCOMPRESS clause may be specified
迁移环境 源:Solaris 10 + Oracle 11.2.0.3 目标:Solaris 10 + Oracle 11.2.0.1 导出命令: expdp user/pwd directory=j ...
- JavaScript及兼容性笔记
1. Json to String JSON.stringify(jsonobj)//(IE8+,Chrome 1+,FF 3+) //参考 http://www.nowamagic.net/libr ...
- java线程(1)--概念基础
参考:http://lavasoft.blog.51cto.com/62575/99150 http://blog.csdn.net/baby_newstar/article/details/6783 ...
- JS魔法堂：判断节点位置关系
一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...
- react经典进阶demo
这是我在官方文档上看到的,功能是实现(具体是什么,请往下看) 以下是json数据: [ {category: "Sporting Goods", price: "$49. ...
- 30天C#基础巩固------了解委托，string练习
---->了解委托. 生活中的例子:我要打官司,我需要找一个律师,法庭上面律师为当事人辩护,它真正执行的是当事人的陈词,这时律师 就相当于一个委托对象.当事人则委托律师为自己辩解. ...
- Android SDK Android NDK Android Studio 官方下载地址
2016.12 Android Studio Windows Includes Android SDK https://dl.google.com/dl/android/studio/install/ ...
- Windows Server 2016
Windows Server 2016 正式版教程:安装.激活.设置 http://www.ithome.com/html/win10/261386.htm 2016-9-29 12:57:58来源: ...