# Category: angular-ui-bootstrap

## Angular UI Bootstrap multiple carousel one by one

I am using AngularJS with ui bootstrap module. 1) What I need is my carousel to change its items one by one. I found a code (by other person) but it’s only in jQuery. Codepen code in jQuery html: <div class=”container”> <h1>Use Bootstrap’s carousel to show multiple items per slide.</h1> <div class=”row”> <div class=”col-md-12″> <div class=”carousel slide multi-item-carousel” id=”theCarousel”> <div class=”carousel-inner”> <div class=”item active”> <div class=”col-xs-4″><a href=”#1″><img src=”http://placehold.it/300/f44336/000000″ class=”img-responsive”></a></div> </div> <div class=”item”> <div class=”col-xs-4″><a href=”#1″><img […]

I am having an issue with angular js typeahead. I have an object that that has a Description property, however if the property contains a an extra Enter at the end of the string, typeahead gives an error like unrecognized token, but when I remove the extra Enter from the end of the string typeahead works as expected. The extra Enter gets appended due to the richtext editor. Here’s the code: angular.module(‘myApp’, [‘ui.bootstrap’]); function TypeaheadCtrl($scope) […] ## uib-datepicker-popup won’t reopen I am trying to use uib-datepicker-popup but am running into an issue that once the calendar opens and I choose a date, I cannot reopen the calendar without refreshing the screen. I step through the function call on the ng-click and it sets the is-open flag to true but the popup doesn’t show after the first time. This is the HTML: <span class=”input-group” > <input type=”text” class=”input-sm ” uib-datepicker-popup=”{{format}}” ng-model=”requestDate” is-open=”opened1″ datepicker-options=”dateOptions” close-text=”Close” /> <span […] ## Allowing multiple directives to transclude in a recursive template I am currently receiving a tree of managers and their subordinates from the back end. I’m using a recursive template to display this. <script type=”text/ng-template” id=”managerTmp”> <div class=”accordion”> {{user.firstName}} {{user.lastName}} <ul class=”list-group” ng-if=”user.subordinates” > <li class=”list-group-item” ng-if=”user.subordinates” ng-repeat=”user in user.subordinates” ng-include=”‘managerTmp'”> </li> </ul> </div> </script> <div class=”col-lg-12″ ng-show=”section === 5″> <uib-accordion close-others=”oneAtATime” ng-show=”portal.acManagers && !spinning”> <ul class=”list-group” id=”1q2w3e”> <li class=”list-group-item” ng-repeat=”user in portal.acManagers” ng-include=”‘managerTmp'” ></li> </ul> </uib-accordion> </div> This all works fine and I get […] ## scope is undefined after callback from$uibModal

I have a directive (Angularjs) that has a controller, from there I am calling an uibModal where I want to modify some details of an object where I clicked. With the modal I am sending two parameters and a callback, everything seems to be ok but when angular go back to the callback function the scope of the controller (not the modal controller) is undefined, actually everything is undefined, how can I comunicate these two […]

## Avoid collapsing typeahead dropdown on blur

I am using Angular Bootstrap typeahead to display suggestions. There is a requirement that even if the user happens to click anywhere on the screen, the typeahead dropdown should not collapse. This is something similar to the static backdrop for Bootstrap modals. Is there any way to avoid collapsing the typeahead dropdown. Source: AngularJS