Questions tagged [angular-bootstrap]

Bootstrap helpers module for AngularJs framework

Bootstrap components written in pure AngularJS by the AngularUI Team

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • AngularJS (requires AngularJS 1.2.x, tested with 1.2.16)
  • Bootstrap CSS (tested with version 3.1.1). This version of the library (0.11.2) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is very small: <20kB for all directives (~5kB with gzip compression!)

Installation

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module: angular.module('myModule', ['ui.bootstrap']); You can fork one of the plunkers from this page to see a working example of what is described here.

CSS

Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

Homepage : http://angular-ui.github.io/bootstrap/

580 questions
3
votes
2 answers

How do I display Angular UI Bootstrap date picker on click?

I have an Angular app that uses Full Calendar. I have a Full Calendar custom button that when a user clicks, should open a Angular Bootstrap Datepicker. I'm currently toggling CSS visibility but for some reason, the date picker doesn't display…
JackH
  • 4,613
  • 4
  • 36
  • 61
3
votes
1 answer

Input type="month" format in google chrome

I have a input type="month" control and I am using Angular UI bootstrap as well. When I select a month in IE it is shown as yyyy-MM format. But in google chrome it s shown as MMMM yyyy format. When localized the months in calendar control is shown…
3
votes
0 answers

How to close angular bootstrap typeahead when multiple fields with the typeahead exist?

I am using angular bootstrap typeahead. I need typeahead on multiple input fields. Is there some option I can use that I am missing out on? Or do I need to add something hacky to achieve this? The two fields look like this :
3
votes
2 answers

How to disable uib-timepicker arrow keys?

even after I use this it still showing up arrows
Here's the plunker : https://plnkr.co/edit/j5JlXWsoldsj0iEdSUMY?p=preview How to disable them ? Anyone knows?…
DennyHiu
  • 4,861
  • 8
  • 48
  • 80
3
votes
1 answer

how to install a module with npm in angular 1

I am trying to install bootstrap using npm. I ran: npm install angular-ui-bootstrap And that succesfully installed the module in the node_modules folder. The problem is I can't seem to reference the files from index.html. I put in the following…
Philip7899
  • 4,599
  • 4
  • 55
  • 114
3
votes
1 answer

Accessing directive attribute in controller

I'm new to angular and I'm using angular-bootstrap-datetimepicker, and I want to access its directive attribute data-datetimepicker-config in my controller
azelix
  • 1,257
  • 4
  • 26
  • 50
3
votes
0 answers

Delete a child angular directive on some elements

I have directive class MyDirective constructor: (@$compile) -> return { scope: var1: "=" var2: "=" restrict: 'A' templateUrl: 'views/template.html' } app.directive 'emDir', ['$compile',…
3
votes
1 answer

Model binding addonLeft.text angular formly

I am using bootstrap templates with angular-formly and I wanted to bind addonsLeft.text to a model so that it dynamically changes once a select option has changed. This is how an input looks like: { key: 'my_input', type: 'input', …
3
votes
0 answers

Bootstrap-ui: Popover inside Container

i have the following problem: I have a container for my header. This container has a fixed size. Then comes my container for the content. This container has the attributes: position=absolute and overflow-y=auto. The problem is: If I place a…
user2622344
  • 956
  • 1
  • 10
  • 26
3
votes
1 answer

Angular Bootstrap implementation for keyboard accessible dropdown submenu?

My goal here was to make a submenu with sane keyboard and screenreader behavior, using: AngularJS jQuery Bootstrap 3 the CSS submenu implementation from 'css - Bootstrap 3 dropdown sub menu missing' Here's a starting point showing how submenus…
3
votes
1 answer

Check if $modal is open similar to $dialog.isOpen

I'm migrating from AngularJS 1.1.15 to 1.3.15 and my current issue is getting $modal to work instead of $dialog. If anyone has any helpful links regarding the migration would be appreciated :) I'm currently handling it per-bug fix. To my current…
AlexD
  • 4,062
  • 5
  • 38
  • 65
3
votes
1 answer

Centering angular bootstrap modal window vertically

How can I center this modal window vertically regardless of the size of the contents displayed. In my page, I am displaying an image as a modal window and I would like it to display in the center of the screen. I can align it horizontally, but I…
3
votes
1 answer

Missing fonts/glyphicons-halflings-regular.* when upgrading angular-bootstrap

I am using Yeoman and the cg-angular generator to scaffold an angular app. This was initially working fine, but I recently upgraded angular-bootstrap from 0.10 to 0.11 to get hold of a new feature regarding modal sizes. After doing this I noticed…
Choc13
  • 796
  • 7
  • 23
3
votes
1 answer

Angular transclude in a directive containing a ng-template (generic Confirm Modal)

Hello I'm struggling while creating a generic confirmation directive based on angular-bootstrap Modal directive. I can't find a way to transclude my content in the ng-template used for the modal construction because the ng-transclude directive isn't…
Jscti
  • 14,096
  • 4
  • 62
  • 87
3
votes
1 answer

How to set min-time and max-time for Angular Timepicker?

Is there a way to set a minimum time and maximum time for Angular's bootstrap time picker? With Angular's Datepicker setting a min and max date is supported, and I am wondering if there is a similar functionality allowed for the Timepicker. Looking…