Search Posts

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=”″ class=”img-responsive”></a></div> </div> <div class=”item”> <div class=”col-xs-4″><a href=”#1″><img […]

Angular js Typeahead syntax error

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 […]

using $uibmodal to open from another controller and template

I’m somehow newbie to $uibmodal and I want to show a form in popup style for each button that I have on my page, and I want to separate code of each popup form to their own js controller and template, not inside my main js controller and template. here’s my simpled code to show the form as a popup : var modalInstance = ${ templateUrl: ‘/App/views/security/people/roleView.html’, controllerUrl: ‘/App/views/security/people/roleController.js’, controller: ‘roleController’, size: ‘lg’, resolve: {}, […]

Change tooltip of clicked element in ng-repeat AngularJS

After click of element I’m executing function and on its success I want to chagne tooltip of clicked element. I have more than one element with this tooltip displayed in ngRepeat loop. However I want to change tooltip only on currentTarget element (element which was clicked). Currently I’m displaying tooltip as interpolated string from controller and after function success I’m changing this string. It cause that every element with this tooltip have new tooltip not […]

Angular UI modal not showing

I’m trying to add a modal that pops up when the user clicks on an element created like this: <li ng-repeat=”task in tasks | filter:{Status: 0}” class=”list-group-item list-group-item-danger” ng-click=”getTask(task)”> This is the getTask function: $scope.getTask = function (task) { taskService.getTask(task.Id) .then(task => { var modalInstance = ${ animation: true, templateUrl: “Content/partials/TaskModal.html”, controller: “taskModalController”, resolve: { task: function () { return task } } }); modalInstance.result.then(task => { if (task) updateTask(task); }); }) }; And the […]

how to pass data to already opened uibmodal popup angular

how to pass data to already opened uibmodal popup angular this.modalInstance = this.${ templateUrl: “serviceeditmodalcontent.html”, controller: ServiceEditModalInstanceCtrl, controllerAs: “ServEdtCtrl”, openedClass: “ServiceData”, windowClass: “manage-wbs-modal edit-service”, keyboard: true, backdrop: “static”, resolve: { ServiceData: { items: Sdata, entityType: selectedEntityType, scope: this.$scope, projStartDate: projectStartDate, projEndDate: projectEndDate, showEBSState: this.showEBSState, } } }); Even after modal popup is opened , i want to sent the updated information to the user. Thanks in advance Source: AngularJS

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

Next Page »