angularJs , json，html片段，bootstrap timepicker angular
css
.demotest { width: 80%; height: auto; overflow: auto; position: relative; margin: 0 auto; margin-top: 50px;; } .mgt20{ margin-top: 20px;; } .timepicker{ background: url("../img/timepicker-icon.png") no-repeat 98% 55%; }
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": "1", "trtwo": "NAMENAME", "trthree": "00000000" }, { "trone": "2", "trtwo": "NAMENAME", "trthree": "11111111" }, { "trone": "3", "trtwo": "NAMENAME", "trthree": "333333" }, { "trone": "4", "trtwo": "NAMENAME", "trthree": "44444444" } ], "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); } }, 750); }) .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 = 0; angular.forEach(map, function (v, k) { re = re.split(k).join('${' + i + '}'); i++; }); i = 0; 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'); } }); } } }; } ]);
