There are 2 directives that can make a group of buttons to behave like a set of checkboxes or radio buttons.
+There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.
var ButtonsCtrl = function ($scope) {
-
+ angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
@@ -508,15 +513,14 @@ Radio
middle: true,
right: false
};
-};
+});function CarouselDemoCtrl($scope) {
+ angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
@@ -618,7 +622,7 @@ Slide {{$index}}
for (var i=0; i<4; i++) {
$scope.addSlide();
}
-}
+});
function CollapseDemoCtrl($scope) {
+ angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
-}
+});
All settings can be provided as attributes in the <datepicker> or globally configured through the datepickerConfig.
All settings can be provided as attributes in the datepicker or globally configured through the datepickerConfig.
ng-model
@@ -794,7 +798,7 @@
format-day-header
(Default: 'EEE') :
Format of day in week header.
format-day-title-
+
format-day-title
(Default: 'MMMM yyyy') :
Format of title when selecting day.
format-month-title
@@ -832,6 +836,25 @@
datepicker-append-to-body
(Default: false):
Append the datepicker popup element to body, rather than inserting after datepicker-popup. For global configuration, use datepickerPopupConfig.appendToBody.
Depending on datepicker's current mode, the date may reffer either to day, month or year. Accordingly, the term view reffers either to a month, year or year range.
+ +Left: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.Right: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.Up: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.Down: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.PgUp: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.PgDn: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.Home: Move to the first date of the view.End: Move to the last date of the view.Enter/Space: Select date.Ctrl+Up: Move to an upper mode.Ctrl+Down: Move to a lower mode.Esc: Will close popup, and move focus to the input.var DatepickerDemoCtrl = function ($scope) {
+ angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
@@ -911,10 +934,9 @@ Popup Settings
startingDay: 1
};
- $scope.initDate = new Date('2016-15-20');
- $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
+ $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
-};
+});
function DropdownCtrl($scope) {
+ angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope) {
$scope.items = [
'The first choice!',
'And another choice for you.',
@@ -1112,7 +1133,7 @@ Dropdown
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
-}
+});
templateUrl - a path to a template representing modal's contenttemplate - inline template representing the modal's contentscope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScopecontroller - a controller for a modal instance - it can initialize scope used by modal. A controller can be injected with $modalInstancecontroller - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with $modalInstancecontrollerAs - an alternative to the controller-as syntax, matching the API of directive definitions. Requires the controller option to be provided as wellresolve - members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS routesbackdrop - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' - backdrop is present but modal window is not closed when clicking outside of the modal window.keyboard - indicates whether the dialog should be closable by hitting the ESC key, defaults to truebackdropClass - additional CSS class(es) to be added to a modal backdrop templatewindowClass - additional CSS class(es) to be added to a modal window templatewindowTemplateUrl - a path to a template overriding modal's window templatesize - optional size of modal window. Allowed values: 'sm' (small) or 'lg' (large). Requires Bootstrap 3.1.0 or laterThe open method returns a modal instance, an object with the following properties:
opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variablesIn addition the scope associated with modal's content is augmented with 2 methods:
-* $close(result)
-* $dismiss(reason)
-Those methods make it easy to close a modal window without a need to create a dedicated controller
In addition the scope associated with modal's content is augmented with 2 methods:
+ +$close(result)$dismiss(reason)Those methods make it easy to close a modal window without a need to create a dedicated controller.
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
- <h3>I'm a modal!</h3>
+ <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
@@ -1235,21 +1266,24 @@ I'm a modal!
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
+ <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
+ <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>var ModalDemoCtrl = function ($scope, $modal, $log) {
+ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
- $scope.open = function () {
+ $scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
- controller: ModalInstanceCtrl,
+ controller: 'ModalInstanceCtrl',
+ size: size,
resolve: {
items: function () {
return $scope.items;
@@ -1263,12 +1297,12 @@ I'm a modal!
$log.info('Modal dismissed at: ' + new Date());
});
};
-};
+});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
-var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
+angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
@@ -1282,22 +1316,24 @@ I'm a modal!
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
-};
+});
+var PaginationDemoCtrl = function ($scope) {
+ angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope) {
$scope.totalItems = 64;
$scope.currentPage = 4;
@@ -1473,7 +1510,7 @@ Pager Settings
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
-};
+});
var PopoverDemoCtrl = function ($scope) {
+ angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
$scope.dynamicPopover = 'Hello, World!';
$scope.dynamicPopoverTitle = 'Title';
-};
+});
var ProgressDemoCtrl = function ($scope) {
-
+ angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
$scope.max = 200;
$scope.random = function() {
@@ -1769,7 +1805,7 @@ Stacked
}
};
$scope.randomStacked();
-};
+});
<rating><rating>var RatingDemoCtrl = function ($scope) {
+ angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
$scope.rate = 7;
$scope.max = 10;
$scope.isReadonly = false;
@@ -1922,7 +1957,7 @@ <rating>
{stateOn: 'glyphicon-heart'},
{stateOff: 'glyphicon-off'}
];
-};
+});
<rating><tab><tab>var TabsDemoCtrl = function ($scope) {
+ angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) {
$scope.tabs = [
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
@@ -2103,7 +2138,7 @@ <tab>
alert('You\'ve selected the alert tab!');
});
};
-};
+});
<tab>var TimepickerDemoCtrl = function ($scope) {
+ angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope) {
$scope.mytime = new Date();
$scope.hstep = 1;
@@ -2259,7 +2294,7 @@ Settings
$scope.clear = function() {
$scope.mytime = null;
};
-};
+});
var TooltipDemoCtrl = function ($scope) {
+ angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope) {
$scope.dynamicTooltip = 'Hello, World!';
$scope.dynamicTooltipText = 'dynamic';
$scope.htmlTooltip = 'I\'ve been made <b>bold</b>!';
-};
+});
typeahead-min-length
(Defaults: 1) :
Minimal no of characters that needs to be entered before typeahead kicks-in
typeahead-on-select
+
typeahead-on-select($item, $model, $label)
(Defaults: null) :
A callback executed when a match is selected
typeahead-template-url
@@ -2561,7 +2596,7 @@
function TypeaheadCtrl($scope, $http) {
+ angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
@@ -2603,24 +2638,22 @@ Custom templates for results
address: val,
sensor: false
}
- }).then(function(res){
- var addresses = [];
- angular.forEach(res.data.results, function(item){
- addresses.push(item.formatted_address);
+ }).then(function(response){
+ return response.data.results.map(function(item){
+ return item.formatted_address;
});
- return addresses;
});
};
$scope.statesWithFlags = [{'name':'Alabama','flag':'5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'}];
-}
+});