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
1
vote
2 answers

Divs inside panel displaying inline

In my angular app I have a bootstrap 'panel-body' class that features the two divs below which each wrap components that are user input fields. For some reason these divs are rendering inline as opposed to on separate lines. Why is this happening…
user3143105
  • 129
  • 1
  • 12
1
vote
0 answers

uibootstrap popver is not opening append dynamically

I am using the pop over for my directive. In my directive, I am binding the popover dynamically. For the first time, if we bind, the popover is working fine. If we bind second time with the same settings for the same element, the popover is not…
Jeeva J
  • 3,173
  • 10
  • 38
  • 85
1
vote
1 answer

How to open $uibModal from within modal Controller?

I have this code: app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, newEmployee){ $scope.addNewVehicle=function(){ // I want to open a new modal here }; });
1
vote
0 answers

Stop Padding right from decreasing when window size decreases

I have two div. Inner div contains a table. When the browser is maximized there is an equal padding on left and right. When the window size is decreased, after one point, right padding starts decreasing and horizontal scroll bar for the table…
Mukund S
  • 95
  • 2
  • 2
  • 8
1
vote
2 answers

Submit form in AngularJs Modal

I'm trying to submit a simple form with input in a modal (popup) written in AngularJs: myApp.run(function($rootScope, $modal) { $rootScope.$on('$stateChangeStart', function(event, toState) { if (toState.name == 'statePopup') { …
selma
  • 77
  • 2
  • 12
1
vote
0 answers

Angular UI Bootstrap installation help...I cannot figure this out

I consider myself above novice with some web development experience, and have been practicing Angular. However, I'm not finding the answer on how to implement this one step from the angular-ui.github.io/bootstrap page. It says to download the…
Groovdafied
  • 45
  • 1
  • 1
  • 8
1
vote
2 answers

Angular UI Typeahead custom directive - model not updated on select

I made custom directive that use Angular UI typeahead directive inside, but not working as expected. In my directive model is not updating on select. Anybody helps with that ? For testing i used static array instead of http service. Plunker…
marioosh
  • 27,328
  • 49
  • 143
  • 192
1
vote
0 answers

AngularUI popover template compiles only once , doesn't get triggered when I navigate to another page in my SPA

I'm working on a SPA Project. At the header I have a menu template and under the menu I have ui-router routes. I built a functionality with popover of Angular Bootstrap . And I am using built-in AngularJS Service $compile for inline template.…
1
vote
0 answers

Make uib-typeahead work in a jHipster project

I have created a project with jHipster 1.4.1. jHipster uses angular-bootstrap in its 1.3.3 version for combining bootstrap components with angular directives. Now, I'm interested in displaying suggestion for a text input with previous given values,…
Aritz
  • 30,971
  • 16
  • 136
  • 217
1
vote
1 answer

Get the edited value in modal angular bootstrap

I want to get the new value in my modal but I cant get the new value. I tried this but still no luck. What I see is the difference is that the resolve return was on $scope. But when I make my return as $scope the var managementModal cant see the…
1
vote
1 answer

ui-bootstrap columns break in AngularJS

I'm new to AngularJS, and I guess by default I'm new to ui-bootstrap. However, I'm no stranger to official vanilla Bootstrap, so I'm a bit confused why my columns are not aligning. For some reason, any size of columns basically just behave like rows…
1
vote
1 answer

how do I use bootstrap ui pagination with angularjs 1.6 component

I would like to do pagination like in this link How to use UI Bootstrap Pagination for a table, generated using ng-repeat I have read the docs here https://angular-ui.github.io/bootstrap/#!#getting_started ng-model="pageNumber", but I don't know…
1
vote
3 answers

Select DropDown not working in mobile

I have a problem in a responsive view. When I click select options it does not work on mobile view. This is my code:
1
vote
1 answer

angularjs uib-tabset not working under ui-bootstrap 2.5.0

Why this snippet is not working? By clicking on the button, it should switch to the selected tab. Whereas this example here with different versions of angularjs and bootstrap work: Link: angularjs switch tab view using ui.bootstrap What is the…
1
vote
1 answer

Add close button to Angular UI bootstrap modal window template

I am following the sample code as per this link: http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal The plunker sample here: http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview I tried to define a custom template customModal.html…
tarekahf
  • 738
  • 1
  • 16
  • 42
1 2 3
99
100