<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<ul>
<label>Selected time is: <em>{{selectedDate | date:'mediumTime' }}</em></label>
<input type="text" ng-model="selectedDate" class="form-control">
<div class="input-group-btn" uib-dropdown auto-close="outsideClick">
<button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle>
<i class="glyphicon glyphicon-time"></i></button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<li>
<div uib-timepicker ng-model="selectedDate" hour-step="1" show-seconds="true" minute-step="1" show-meridian="ismeridian"></div>
</ul>
</div>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Open modal</button>
<div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
<div class="modal-parent">
</div>
</div>
</body>
</html>
/* Styles go here */
<div ng-controller="ModalInstanceCtrl as $ctrl" class="modal-demo">
<div class="modal-header">
<h3>I'm a modal! {{mytime}}</h3>
</div>
<div class="modal-body">
<label>Selected time is: <em>{{selectedDate | date:'mediumTime' }}</em></label>
<input type="text"ng-model="selectedDate" class="form-control">
<div class="input-group-btn" uib-dropdown auto-close="outsideClick">
<button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle>
<i class="glyphicon glyphicon-time"></i></button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<li><div uib-timepicker ng-model="selectedDate" hour-step="1"
show-seconds="true" minute-step="1" show-meridian="ismeridian"></div>
</ul>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($uibModal, $log, $document) {
var $ctrl = this;
$ctrl.items = ['item1', 'item2', 'item3'];
$ctrl.animationsEnabled = true;
$ctrl.open = function(size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function() {
return $ctrl.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$ctrl.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$ctrl.openComponentModal = function() {
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
component: 'modalComponent',
resolve: {
items: function() {
return $ctrl.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$ctrl.selected = selectedItem;
}, function() {
$log.info('modal-component dismissed at: ' + new Date());
});
};
$ctrl.openMultipleModals = function() {
$uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: 'stackedModal.html',
size: 'sm',
controller: function($scope) {
$scope.name = 'bottom';
}
});
$uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title-top',
ariaDescribedBy: 'modal-body-top',
templateUrl: 'stackedModal.html',
size: 'sm',
controller: function($scope) {
$scope.name = 'top';
}
});
};
$ctrl.toggleAnimation = function() {
$ctrl.animationsEnabled = !$ctrl.animationsEnabled;
};
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($uibModalInstance, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function() {
$uibModalInstance.close($ctrl.selected.item);
};
$ctrl.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
// Please note that the close and dismiss bindings are from $uibModalInstance.
angular.module('ui.bootstrap.demo').component('modalComponent', {
templateUrl: 'myModalContent.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: function() {
var $ctrl = this;
$ctrl.$onInit = function() {
$ctrl.items = $ctrl.resolve.items;
$ctrl.selected = {
item: $ctrl.items[0]
};
};
$ctrl.ok = function() {
$ctrl.close({
$value: $ctrl.selected.item
});
};
$ctrl.cancel = function() {
$ctrl.dismiss({
$value: 'cancel'
});
};
}
});
var ModalInstanceCtrl = function($scope, $filter, $modalInstance) {
$scope.selectedDate = new Date();
$scope.ismeridian = false;
$scope.$watch('selectedDate', function() {
$scope.selectedTime = $filter('date')(new Date($scope.selectedDate), 'mediumTime');
});
$scope.ok = function() {
alert($scope.text);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};