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
16
votes
3 answers

collapse transition not working with angular's UI Bootstrap

I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition. Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax…
Edward Newell
  • 17,203
  • 7
  • 34
  • 36
16
votes
4 answers

How can I modify ui.bootstrap.dropdown to respond to a mouse hover over the drop button?

I would like to use the ui.bootstrap.dropdown message box to display text information (not links) in a similar way to the ui.bootstrap.popover. I would like to modify this directive as it does 99% of what I need and I don't want to add all the…
Alan2
  • 23,493
  • 79
  • 256
  • 450
16
votes
1 answer

Angular JS - Date changes when submitting to $http - Timezone issue

I am having a strange problem where a Date changes when it is passed to API through $http.put, I suspect a timezone issue: Datepicker triggers ng-change event - console.log: Tue Jun 10 2014 00:00:00 GMT+0100 (GMT Summer Time) Passed to API using…
16
votes
4 answers

wrapping inputs in directives in angular

I had the idea to wrap inputs into custom directives to guarantee a consistent look and behavior through out my site. I also want to wrap bootstrap ui's datepicker and dropdown. Also, the directive should handle validation and display tooltips. The…
roemer
  • 537
  • 1
  • 5
  • 21
16
votes
11 answers

Create Hoverable popover using angular-ui-bootstrap

I have the following code for creating a popover in my template file:
16
votes
2 answers

Angular UI Bootstrap popover with close button

I am using Angular UI Bootstrap to create a popover but I am unable to find the option to add a close button inside the popover. I customized the popover template to include the close button. But I am still unable to find a function/event to close…
Web Freak
  • 161
  • 1
  • 1
  • 4
16
votes
1 answer

Angular UI.Bootstrap's radio buttons act strange with ng-repeat

I have a problem dynamically generating options for a radio model in angular's ui.bootstrap. I thought I could simply ng-repeat over an array, using it's contents for the btn-radio attribute like so: //in the controller $scope.radioModel = …
Blackle Mori
  • 1,131
  • 1
  • 8
  • 14
16
votes
2 answers

What's a good way to control an angular-ui accordion programmatically?

I am using the accordion directive from http://angular-ui.github.com/bootstrap/ and I need to have more control over when the accordions open and close. To be more precise I need a button inside the accordion-group that will close its parent…
ivarni
  • 17,658
  • 17
  • 76
  • 92
15
votes
1 answer

Text over image - responsive

this is my first question soo... i have to do someting like this: but i search a lot and nothing work for me, i had something like this in my html and css .thumbnail { position: relative; margin-bottom: 0; border: 0; …
Javier Gonzalez
  • 153
  • 1
  • 1
  • 4
15
votes
2 answers

Passing data through open modal function Angular uibModal

I'm trying to figure out how to pass unit_number into the modal when it pops up. I'm pretty new with Angular and I'm a little confused with what resolve: and group: are doing and how I can include the unit_number in that return statement. …
15
votes
2 answers

How can you do server side paging with Angular's UI Bootstrap pagination directive

Hi we are wanting to do server side paging with Angular's UI Bootstrap pagination directive. We know how to create a RESTful endpoint to serve up the pages from our servers but didn't see any documentations about how to hook that endpoint up to…
Ryan Vice
  • 2,133
  • 3
  • 23
  • 33
15
votes
2 answers

$event passed with ng-click is undefined

Why is the passed $event object in the toggleDropdown function undefined? This is the original code from: http://plnkr.co/edit/koNsQycAAiEmI8jBApS2?p=preview except that the original code does not have the toggleDropdown function in the button-tag…
Pascal
  • 12,265
  • 25
  • 103
  • 195
15
votes
2 answers

AngularJS how to create a reusable template for Bootstrap modal

So I am using the AngularJS Bootstrap modal (http://angular-ui.github.io/bootstrap/). Which is working fine but I was wondering if I could create a basic template that can take in a title and the content. Then it would populate my template with…
Dragonfly
  • 4,261
  • 7
  • 34
  • 60
15
votes
5 answers

how to show html on pop over using angular ui bootstrap?

I make demo of pop over like this .It show a pop over on right side when I click the button .But now problem is that how I will show some html on pop over .
15
votes
2 answers

how to make ng-model value set by ui-select value

I am currently using angular-ui/ui-select in my project. I am able to bind the value of the ui-select to an object without issue, however it is binding the entire item that is being iterated over. I would like to only bind based on the item.codeId…