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
6
votes
2 answers

async pipe with a method call in angular 4 calls infinitely

I need to provide select UI element with dynamic options for which I have a method that returns an observable based on the Inputs TypeScript (Component class) getCars(type : string, engine : string) : Observable{ return…
Mahi Tej Gvp
  • 984
  • 1
  • 14
  • 34
6
votes
1 answer

Choosing multiple values in ng-bootstrap Typeahead

I am using typeahead from Angular ng-bootstrap - https://ng-bootstrap.github.io/#/components/typeahead/examples Everything is working fine, but I want multiple values on one single text box. As that field is a form group, once one value is selected,…
Manu
  • 1,243
  • 5
  • 17
  • 43
6
votes
2 answers

horizontal scroll in bootstrap modal

Hi i am trying add a horizontal scroll bar in bootstrap modal. I know horizontal scroll bars are not a good idea but in my case i have dynamic content which can have variable width so i want to make modal body scroll-able horizontally when width…
arsinawaz
  • 480
  • 1
  • 6
  • 18
6
votes
4 answers

Angular itkn error caused by directives defined with function outside array

I'm using Angular 1.3.15, also have tried 1.2.28, along with angular bootstrap. Last night, after updating Chrome to v42.0.2311.90, I suddenly began seeing tons of angular itkn errors: Error: [$injector:itkn] Incorrect injection token! Expected…
helion3
  • 34,737
  • 15
  • 57
  • 100
6
votes
1 answer

Recognize when angular bootstrap dropdown-menu is closed

Is there a way to recognize that angular-bootstrap dropdown-menu is closed? I want to recognize this event and run specific function.
6
votes
1 answer

angular-ui-bootstrap datepicker and masked input

I am taking my first steps in Angular & hope i am in the correct place to find an answer to my question/issue. If not, please point me in the right direction. I am using the angular UI bootstrap popup datepicker like the example here :…
6
votes
3 answers

Angular UI multi-level Dropdown Toggle

I'm trying to use the Angular UI Dropdown Toggle to create a multi-level / nested drop down. When I click on the first level of the dropdown it simply closes up altogether and does not reveal the second tier. I've attached a very basic plunkr to…
5
votes
2 answers

Why do we need reactjs-bootstrap if there's easy way?

I've been developing web app using react or angular but I'm confused why people would use library like react-bootstrap (https://react-bootstrap.github.io/introduction.html) or Angular-bootstrap? Because when I create I just have to load the css…
5
votes
1 answer

$uibModal.open() is not a function

I am trying to integrate Angular bootstrap modal form, Here is my controller angular.module('app').controller('groupController',['groupService','$uibModal','toastr','$scope',function(groupService,toastr,$uibModal,$scope) I have added $uibModal as…
Pavan S
  • 165
  • 2
  • 11
5
votes
1 answer

Bind angular datepicker and timepicker

I want to bind angular timepicker and datepicker. I am using Angular bootstrap library As per documentation of timepicker, it requires new Date object for min and max values. If I simply set like this var d = new Date(); d.setHours( 2…
swapyonubuntu
  • 1,952
  • 3
  • 25
  • 34
5
votes
1 answer

How to handle month names inflection - Angular date localization

I run into an issue recently - in some parts of my angular application I have to show the date in the following format: MMMM yyyy, as well in some components of the Angular UI Bootstrap framework. The basic issue is that in some languages the month…
danyloid
  • 1,677
  • 3
  • 21
  • 47
5
votes
1 answer

Angular Bootstrap DateTimePicker - Highlight Today Date on embedded Calender

Please accept my apologies if i had any mistakes in my post. This is my first post here. But, i am not new to StackOverflow. Correct me if any. I am using angular-bootstrap-datetimepicker library from the below url: Link to library I am currently…
Manoj
  • 285
  • 4
  • 14
5
votes
0 answers

AngularJS finding who changed an object watched by $watch

I'm using Angular-Bootstrap Carousel directive and making some changes on top of it. The Carousel had ng-repeat for the slides. I'm trying to get to the next/previous slide by hovering the right/left controls instead of by click. And achieving that…
AlexD
  • 4,062
  • 5
  • 38
  • 65
5
votes
3 answers

AngularJS refresh smart table after inserting new record in Bootstrap Modal Form

I use angular-bootstrap and and Angular Smart table. I have a modal form which adds new records to database and shows the list in my smart table. Adding new records is working fine but how do I refresh my smart table after a new record is inserted…
fefe
  • 8,755
  • 27
  • 104
  • 180
5
votes
4 answers

Disable Angular ui.bootstrap.datepicker

I'm using the datepicker in the Angular bootstrap collection. (http://angular-ui.github.io/bootstrap/). I know that you can disable individual dates in the datepicker, but I need to disable the whole datepicker, as shown in this blog post (which…
user2964500
1 2
3
38 39