Questions tagged [angular-ui-bootstrap]

A set of AngularJS directives based on Twitter Bootstrap's markup and CSS

Angular UI bootstrap is a set of AngularJS directives based on Twitter Bootstrap's markup and CSS.

The goal is to provide native AngularJS directives without any dependency on jQuery or Bootstrap's JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the original JavaScript code size and better integrated into the AngularJS ecosystem.

Directives

Stack Snippet Starter Pack

HTML:

<link href="//unpkg.com/bootstrap@3/dist/css/bootstrap.css" rel="stylesheet">
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">

    <span uib-tooltip="{{ToolTipText}}" tooltip-placement="bottom" >
      Hover for Tooltip
    </span>

  </div>
</div>

JavaScript:

angular.module('ui.bootstrap.module', ['ui.bootstrap'])
.controller('ui.bootstrap.ctrl', function ($scope) {
  $scope.ToolTipText = "Hello, World!";
})

Related Tags

  • AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!

Related Libraries

  • UI-Bootstrap 4 Bootstrap components written in pure AngularJS by the AngularUI Team. Ported to Bootstrap 4 by Morgul
4643 questions
36
votes
5 answers

How to tell which bootstrap tab is selected in Angular-UI

Is there a way to tell which tab that has been selected when using the Bootstrap tabs in Angular UI? I tried watching the panes array but it deosn't seem to be updated when switching tab. Can one specify a callback function when a tab is…
35
votes
5 answers

Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

It's so simple in a non-Angular environment. Just html and a two line of js code to show a modal confirmation dialog on the screen. Now I am developting an AngularJS project in which I am using ui-bootstrap modal confirmation dialogs all over the…
ilter
  • 4,030
  • 3
  • 34
  • 51
35
votes
9 answers

Angularjs bootstrap dropdown not working

Am bit new to angularjs and bootstrap. Am trying to add a simple dropdown. But it is not working. Tried out the suggestion @ Bootstrap 3 simple dropdown not working. That is also not working.
35
votes
11 answers

Angular JS - Automatically focus input and show typeahead dropdown - ui.bootstrap.typeahead

I am using Angular JS - ui.bootstrap.typeahead: I would like to click a button and focus an input field and automatically show the typeahead suggestion dropdown. I have a directive that automatically focuses the input field when the button is…
Holland Risley
  • 6,969
  • 9
  • 25
  • 34
35
votes
5 answers

How to clear text from AngularUI typeahead input

I have a typeahead input. The input text is set to the option selected on the typeahead. However, I want to clear this text and display the "placeholder" value again on the text box after I select one of the options from typeahead (because I add the…
31
votes
7 answers

Parser Error: Got interpolation ({{}}) where expression was expected

I'm using ng-bootstrap as a substitute for ui-bootstrap in angular2. My html is as follows:
31
votes
5 answers

Turn off animation, modal, angular-ui

Is it possible to turn off the animation for the modal directive in angular-ui? http://angular-ui.github.io/bootstrap/ Can't find any in the options. Should I modify the source? Or is there any best practice when you want to customize?
Joe
  • 4,274
  • 32
  • 95
  • 175
31
votes
6 answers

AngularJS BootstrapUI Typeahead with object & selection functionality

I'm trying to implement a typeahead in Angular using http://angular-ui.github.io/bootstrap/, where the typeahead field displays full addresses but once clicked another field is populated with just the postcode for that address. I'm trying to use…
stampeder
  • 713
  • 2
  • 7
  • 6
28
votes
6 answers

Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?

I have a form that is wired into angular, using it for validation. I am able to display error messages using ng-show directives like so:
danludwig
  • 46,965
  • 25
  • 159
  • 237
27
votes
3 answers

Angularjs accordion ng-click on panel-header

In AngularJS UI Bootstrap I want to activate isopen when panel-heading is clicked, but I couldn't find a way. In this version is activated only if you click the link. Here's what I tried;
Alpan Karaca
  • 968
  • 5
  • 12
  • 30
26
votes
4 answers

How to handle 'Possibly unhandled rejection: backdrop click' in a general way

I have an angular service for handling modals: angular.module('myApp').service('ModalService', function($uibModal) { function open(options) { return $uibModal.open(options); } }); Now I upgraded to angular 1.6 and got this error: Possibly…
Andi
  • 1,172
  • 1
  • 11
  • 16
26
votes
6 answers

Angularjs Bootstrap modal closing call when clicking outside/esc

I am using the Angular-ui/bootstrap modal in my project. Here is my modal: $scope.toggleModal = function () { $scope.theModal = $modal.open({ animation: true, templateUrl: 'pages/templates/modal.html', size: "sm", …
bryan
  • 8,879
  • 18
  • 83
  • 166
25
votes
3 answers

Unit testing a modalInstance controller with Karma / Jasmine

EDIT : Quick & Dirty solution at the end of this post I am using a modal window from AngularUI-Bootstrap in the same way that it is explained on the website, except that I splitted files. Therefore I have : CallingController.js : $scope.delete =…
24
votes
4 answers

Add new data to typeahead result on scroll

I'm using angular bootstrap typeahead. I would like to add a functionality for infinite scroll in that, for that i have added a small directive for scroll functionality and some changes in typeahead template, scroll directive works as expected but…
24
votes
7 answers

Angular Bootstrap Modal leaves backdrop open

I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals. I'm calling a Modal in my controller like so: var modalInstance = $modal.open({ animation: true, templateUrl:…
Squrler
  • 3,444
  • 8
  • 41
  • 62