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
14
votes
4 answers

Protractor:Waiting for an element that is present but not displayed

I've written a test to check if a element is visible on screen, in my case an angular-ui-bootstrap collapsible panel, aka, the "warning". The code works, but the tests used to fail ~75% of the time. There is a collapse animation on the display of…
Julien Bérubé
  • 1,256
  • 1
  • 13
  • 22
14
votes
2 answers

Angular UI accordion with buttons in the header part

I am using the accordion directive from http://angular-ui.github.com/bootstrap/ and I need to have two buttons in the header part. Add - Create exactly same accordion below the original. Remove - Remove the accordion. (the first accordion can not…
user2801604
  • 143
  • 1
  • 1
  • 4
14
votes
2 answers

Set input invalid when typeahead-editable is false

I'm using typeahead's UI Bootstrap component and I want to force the selection to validate my form. Is it possible to configure it to set the input invalid when typeahead-editable is set to false and the user enters a "bad" value or I should write a…
Julien Meyer
  • 275
  • 1
  • 4
  • 12
14
votes
2 answers

Typeahead using object name

I'm trying to setup a typeahead using AngularJS & UI Bootstrap like so: .html
Jesse
  • 2,043
  • 9
  • 28
  • 45
13
votes
2 answers

Angular 6 ngbTypeahead filter of list of JSON objects

I've got a ngbTypeahead which when typing in the field should be able to query a list of objects. The formate of the objects in the list "projections" is { code: "6326" group: "world" name: "WGS 1984" } HTML :
yamamoto585
  • 381
  • 1
  • 6
  • 16
13
votes
2 answers

Angular UI - set active tab programmatically

I using AngularUI with this code: Tab 1 content Tab 2 content I want to programmatically change the current active tag from my…
No1Lives4Ever
  • 6,430
  • 19
  • 77
  • 140
13
votes
2 answers

catching Angular Bootstrap UI $uibModal closed event after the modal was closed

I'm opening a modal window using $uibModal.open from another controller, and need to be notified when the modal window was closed completely (and not during closing...) so I'll be able to run a function. The code that opens the modal is as…
13
votes
4 answers

Angularjs ui bootstrap: how to vertical center modal component?

Recently I am learning angularjs. I have used bootstrap before. With jquery, I can easily change the position of the modal component position to make it vertical align. Now with angularjs, it seems not very easy to do that. Here is a plunker link of…
ahwyX100
  • 585
  • 2
  • 9
  • 22
13
votes
2 answers

Angular UI Bootstrap Pagination ng-model not updating

I am trying to use a UI Bootstrap Pagination directive in my project, but for some strange reason the ng-model used for updating the current page is not working. The pagination is showing up correctly with the correct number of tabs and everything,…
Tom O'Brien
  • 1,741
  • 9
  • 45
  • 73
13
votes
10 answers

How can we make show/hide password input in angular js with bootstrap 3?

I want to make show/hide password input in angularjs with Bootstrap 3. The toggle option needs to be inside the input. Can you provide a snippet or example on that. Thanks a million.
Karthik
  • 4,943
  • 19
  • 53
  • 86
13
votes
6 answers

How do you Bind to Angular-UI's Carousel Slide Events?

I'm using Angular-UI's carousel and I need to tell my google charts to redraw after they have slid into view. In spite of what I've read, I can't seem to hook into the event. See my…
jduprey
  • 1,176
  • 1
  • 9
  • 9
13
votes
1 answer

Update bootstrap dropdown button value and action in angular-ui

I have a dropdown button. If I select an item from the dropdown list, the main button's action should change to the items action, and the content too. I tried one version, as you can see above, with controller:
kree
  • 440
  • 1
  • 9
  • 26
13
votes
2 answers

Center Angular modal ui

I am playing with angular modal ui dialog. I wonder what is the way to center it ? I find a similar question: Twitter Bootstrap - Center Modal Dialog but was unable to make it work as I am rather new to angular. Here is a simplified version of the…
Mdb
  • 8,338
  • 22
  • 63
  • 98
13
votes
7 answers

A directive to format phone number

I was wondering how to automatically format a number in an input field using an angularjs directive? When I type in an input field say 6042919283 I want it to be shown as 604-291-9283. Thanks
13
votes
2 answers

How to add angularjs ui bootstrap tooltips dynamically to existing markup?

Relatively new to angularjs. Help me understand what's going on here! What I'm ultimately trying to accomplish: Given a block of text in my html (say in a paragraph element), I want to dynamically add tooltips (bootstrap tooltips to be exact) to…
PeterG
  • 772
  • 2
  • 11
  • 28