FAQ Database Discussion Community


extending angular-ui-bootstrap typeahead module

javascript,angularjs,angular-ui-bootstrap,angular-ui-typeahead
I'm using angular-ui-boostrap's typeahead component to let people choose a person's name, or add a new name if their selection isn't present. Right now I modified getMatchesAsync with my own code: if(scope.matches.length < 4 || scope.matches.length == undefined){ scope.matches.push({ id: getMatchId(matches.length), label: 'Add New +', model: 'new' }); } But...

TypeError: Cannot read property 'open' of undefined

angularjs,node.js,angular-ui-router,angular-ui-bootstrap
I am trying to create a POP UP using a Modal in angular js.I am facing and issue.Its says. TypeError: Cannot read property 'open' of undefined. Its throwing at $modal.open statement. The code for config as below : homeModuleApp.config(function ($stateProvider) { $stateProvider.state('login', { url: '/login', //templateUrl: '/app/ng/modules/home/partials/login-partials-view.html', //controller: 'ModalDemoCtrl' onEnter:...

Model binding not working in Angular UI Bootstrap modal

javascript,angularjs,angular-ui-bootstrap
I have simple example using Angular UI Bootstrap modal service. In this example I don't understand why model binding is not working. Instead of seeing "Doing something..." on modal dialog I see "{{message}}". What I need to change? Example is here: http://plnkr.co/edit/fJhS3e7At11tJTuNSWAB?p=preview modal html looks like this: <div ng-app="myModule"> <div...

Typehead displays wrong on certain input

angularjs,twitter-bootstrap,http,angular-ui-bootstrap
I am using a uiTypehead for input selection. It works well except for a simple fact. My inputs always have the form like {name: "Las Vegas McCarran International (LAS)<span class="country">United States</span>", iata: "LAS"} So I insert <span class="country">...</span> from my backend into the string. When I then type in "veg"...

Stop Angular UI bootstrap dropdown from closing in certain cases?

javascript,angularjs,angular-ui-bootstrap,event-bubbling
I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close. I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too. Is there a...

Retrieve the date portion of date object in milliseconds

javascript,date,datetime,angular-ui-bootstrap,milliseconds
How can I get the date portion of a Date object in milliseconds in javascript? I didn't find any method to this. I was trying: var today = new Date(); var datePortion = today.toDateString(); var inMiliseconds = new Date(datePortion).getMilliseconds(); console.log(inMiliseconds); The return is always 0. See jsFiddle. What can I...

Datepicker in Angular ui modal not opening

angularjs,angular-ui-bootstrap,bootstrap-modal,bootstrap-datepicker
I have a datepicker within a form in my modal. The datepicker is not opening no matter what I try. My code is : //In my parent controller - Called on button click $scope.openModal = function(indx){ var modalInstance = $modal.open({ animation:true, templateUrl:'myModal.html', controller: 'MyModalController' }); }; //In MyModalController $scope.open =...

Why is not binding to $scope?

javascript,angularjs,pagination,angular-ui-bootstrap
Example So the below template gets loaded as the content for a modal. I can read the scope I've set, but I can't understand how I've not bound the <pagination> to totalItems. Template.html <div class="modal-header"> <h3 class="modal-title">{{$parent.helpName}}</h3> </div> <div class="modal-body"> Page {{currentPage }} of {{totalItems}} <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm"...

Typeahead Losing focus on typing in the input

angularjs,angular-ui-bootstrap,angular-ui-typeahead
When I type a character and as soon as typeahead popup opens with matched elements, the focus gets lost from the input element. I have to manually set the focus back again into the input element. Why is this happening? FYI, I found a similar closed issue in here without...

Angular ui-bootstrap popover text overflow using safari

angularjs,safari,angular-ui-bootstrap,popover
There is an issue with text overflowing ui-bootstrap's popover on the Safari browser. The problem was initially seen on an iPhone with its narrow screen but also occurs on Windows7 running Safari 5.1.7. When a popover occurs outside the window, the horizontal scroll bar is enabled to view the element,...

UI Bootstrap Popover: change width

angularjs,angular-ui-bootstrap
I'm trying to use the popovers from UI Bootstrap in AngularJS: http://angular-ui.github.io/bootstrap/#/popover <i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i> It gives me a popover like this: How can I style change...

Any conflicts between UI-Bootstrap and Twitter Bootstrap?

angularjs,twitter-bootstrap,angular-ui-bootstrap
Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap? I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap....

modal service in angularJS

angularjs,templates,modal-dialog,angular-ui-bootstrap
Below is my controller angular.module('repoApp') .controller('loginCtrl', function ($scope,$modal,$state) { $scope.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma' ]; $modal.open({ templateURL: 'views/modals/test.html', }); }); Below is my template : <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> The error is I got: Error: One of template or templateUrl options is required. at Object.$modalProvider.$get.$modal.open...

angularjs/signalR bootstrap progressbar not updating with controller changes

javascript,angularjs,signalr,angular-ui-bootstrap
I have a UI Bootstrap progressbar that I'm trying to hook up to messages from a SignalR hub. The idea is that the server-side hub sends me progress percentages that are reflected in the progress bar. The problem I have is that I see the messages coming into the browser...

Unknown provider: $modalInstanceProvider <- $modalInstance in Angularjs modal

angularjs,twitter-bootstrap,modal-dialog,angular-ui-bootstrap
I am using angular bootstrap ui modal which is working fine but when I try to close it using modalInstance it gives above error.Here is my code var app = angular.module('LoginModule', ['ui.bootstrap']); app.controller('LoginModal', ['$scope', '$modal', function ($scope, $modal) { $scope.animationsEnabled = true; $scope.open = function (size) { var modalInstance =...

need to add scrolling bar to sub menu items

angularjs,angular-ui,angular-ui-bootstrap
How can I add scrolling bar to my Filter sub menu? I have nearly 100 items in that list. Please find the plunker. The following is my sub menu code, <li class="dropdown-submenu"><a href>Filter Sub Menu</a> <ul class="dropdown-menu"> <li ng-repeat="filt in savedFilterList "> <a href> {{filt.filter_name}}</a> </li> </ul> </li> ...

No official example for navbar on UI Bootstrap?

angularjs,angular-ui-bootstrap
Why isn't there an official navbar example? https://angular-ui.github.io/bootstrap/ Searching on the web, I've found a few examples but they don't work on the latest released AngularUI version and Bootstrap. All the examples I've found were for older versions. ...

Angular-UI Modal resolve

javascript,angularjs,angular-ui,angular-ui-bootstrap
Dear all I am new to Angularjs I am creating a modal with Angular. One of the example I found online is following which I have difficulty understanding $scope.checkout = function (cartObj) { var modalInstance = $modal.open({ templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html', controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) { }],...

How can I open one accordion-group when I click to close another accordion-group?

angularjs,accordion,angular-ui-bootstrap
Here is my accordion: <accordion class="m3Details"> <accordion-group is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> <accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading> <li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite" ><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px"...

How to disable Year/Month navigation in Angular UI Datepicker

angularjs,datepicker,angular-ui-bootstrap
I'm wondering if any knows how to disable the month/year navigation button on the Angular UI datepicker (http://angular-ui.github.io/bootstrap/#/datepicker). We want to disable the ability for users to click on the "Month/Year" text in between the navigation arrows and can't figure it out. Our current config options look like this: $scope.dateOptions...

Can the angular-ui-bootstrap typeahead be used as an auto-complete?

angularjs,angular-ui-bootstrap
I'm looking to add an 'auto-complete' feature to text fields and textareas in my Angular app. I'm looking for something similar to GitHub's @-mentions, i.e. when the user types a specific key (e.g. @) a dropdown box appears so that the user can select the text to insert. Something like...

Make UI Bootstrap accordion heading fully clickable area

angularjs,angular-ui-bootstrap
I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like the default behavior. <accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime"> <accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count"> <accordion-heading> <div class="panel-heading-blue"> <i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i> FDA Class 1 Recalls...

Angular based UI Components, quantumui vs angular-strap vs angular-bootstrap-ui

angularjs,angular-ui,angular-ui-bootstrap,angular-strap,quantum
I have been looking for a component set for a start-up project which would be based on Angular.js After some research, I have found tree common component set which can be applicable. The first is angular bootstrap ui http//angular-ui.github.io/bootstrap/. It seems clear but there is no enough examples and documentation....

Angular and Angular UI Bootstap - Submit a form on Enter key

angularjs,twitter-bootstrap,angular-ui-bootstrap
I am following form submission guidelines in the AngularJS documentation, however the form is not being submitted when I hit the Enter key. What do I need to do make this work? Here's my code. The important bit is that I am using ng-click to specify a handler for the...

Wrap directive content with ng-transclude not working

javascript,angularjs,angular-ui-bootstrap
I have the following directive <modal title="Login form" visible="true"> Modal content </modal> And i have a modal.template.html file where I've included <ng-transclude></ng-transclude>: <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Title</h3> </div> <div class="modal-body"> <ng-transclude></ng-transclude> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button...

Angular Dynamic Locale not working instantly

angularjs,localization,datepicker,locale,angular-ui-bootstrap
I use angular-dynamic-locale to change the language of UI Bootstrap's datepicker (I do not want to add the right localization source file at the server side. Hence, I need something more dynamic). The localization file is loaded. However, when I open a datepicker on my page, the localization takes place...

Dynamic multi-column checkboxes with AngularJS and Bootstrap

angularjs,angular-ui-bootstrap
I need the ability to display a list of checkboxes in multiply columns and have not been able to figure out a why to make it work. I am using AngularJS and Bootstrap. This is what I have working right now but the checkboxes are in one column. <div class="row">...

angularJS pass object attributes to modal

javascript,angularjs,angular-ui-bootstrap
I want to pass a whole object to modal, so I can view all of its attributes there. Right now I have items that look like this: $scope.items = [{ Title: title, Id: id }] In my html page i am using a 'ng-repeat', something like this: <tr ng-repeat="item in...

How to hide a div in Menu Collapse

angularjs,angular-ui,angular-ui-bootstrap,angularjs-bootstrap
I finally got the collapse menu working for the Bootstrap Angular UI. However I still couldn't figure out how to hide the div for the "hide-mobile" class and show the "show-mobile" class in the mobile view instead. Currently, it shows both. Should I be using @media queries for this or...

How could i get this grid with Boostrap?

html,angularjs,twitter-bootstrap-3,angular-ui-bootstrap
What i want is to make this divisions using Bootstrap and AngularJS What i don't know how to do is to make the divisions, i was thinking to split the container in 3 columns of 4. Also want to know if can i split the container in two columns of...

Odd Angular/Bootstrap Dropdown Behavior

javascript,jquery,angularjs,angular-ui-bootstrap
I've got an application requiring a series of dropdowns. The functionality requires me to be able to switch between normal dropdown behavior and multi-select behavior. I have made slight modifications to the ui.boostrap.dropdown from the Angular Directives for Bootstrap (see Dropdown). Everything works well, except for a gray bar after...

collapse transition not working with angular's UI Bootstrap

angularjs,css-transitions,angular-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 highlighting work, and a...

How to pass model value on close modal popup?(Angularjs)

angularjs,angular-ui-bootstrap
I have one bootstrap modal popup in angularjs. My plunker is here : Links My problem is that i want to get selected value on close popup not only on close button .if user want to close from out of area like black background also need to get selected value....

Angular: default config for component

angularjs,tabs,angularjs-scope,angular-ui-bootstrap
how can I apply this config to my component. Im using a controller with a config setting by me, but how can I provide a default config set of options like in a jquery plugin: $.fn.helloWorld = function( options ) { // Establish our default settings var settings = $.extend({...

Angular UI Bootstrap Respopnsive navbar Dropdown not working Properly in New Version

angularjs,angular-ui-bootstrap,nav
I just created an AngularJS project with grunt bower and Yeoman. Included Updated version to Angular 1.3.13. I want to use Angular UI bootstrap. I added Nav Bar which is responsive. But while on small screens, the drop down doesn't seem to work. When I click on dropdown the entire...

Custom Bootstrap UI alert with AngularJS

angularjs,angular-ui-bootstrap
I am using angular-ui-bootstrap lib in my application. I need to create custom alert with button inside firing modal window. I have tried two options: Redefine module angular.module("template/alert/alert.html", []) from ui-bootstrap-tpls.js. Didn't work as I didn't manage to implement a button firing popup window. Create a custom module based on...

angular-ui collaspe css animation issue with bootstrap panel

angularjs,twitter-bootstrap,angular-ui,angular-ui-bootstrap
I've created a demo in Plunker , which I use angular-ui collaspe to work on bootstrap panel, but it seems the ui animation not work well, when I click the title bar to collaspe, the panel-body will animate to its default padding 15px, then disappear immediately. And if I remove...

Using ng-click to toggle between two functions

javascript,angularjs,angular-ui,angular-ui-bootstrap
I am using the datepicker from bootstrap-UI for angular. I would like to toggle between two functions. now() and clear(). Is this possible inside Angular's ng-click? http://plnkr.co/edit/aMcKwXOSQwgnGwfNN9yI?p=preview The toggle has the ng-click="today()" I would like to add clear() to it, thanks. Controller Code: $scope.today = function() { $scope.dt = new...

Dynamic bootstrap ui datepicker

angularjs,dynamic,datepicker,angular-ui-bootstrap
I have a bootstrap ui datepicker sitting inside a ng-repeat. So the user could add as many rows as they like which would result in multiple instances of the datepicker. All the examples I have seen for multiple datepickers only show if you have two and the solutions dont work...

angular bootstrap modal won't appear in the front when browser is full screen on an element

angular-ui-bootstrap,bootstrap-modal,angular-bootstrap
When I go full screen on an element and then try to display angular bootstrap's modal in front, it won't appear in front. To test it: 1 - Click on this link http://plnkr.co/edit/oKZHZZebyNMwpG114Jyy?p=preview 2 - Click on the "launch the preview in separate window" icon (image shown below) 3 -...

How to create a chat box window using html bootstrap and angular js

angularjs,html5,twitter-bootstrap,angular-ui-bootstrap
My requirement is to create a facebook style chatbox window using HTML, angularJS and bootstrap. I also need to add Text to speech and voice control button on chat box and How i can minimize or maximize the chat box. Please suggest me how i can achieve this.

How do I split Angular UI Bootstrap accordions into multiple columns?

javascript,angularjs,accordion,angular-ui-bootstrap
I am trying to split accordion directives into multiple columns. This is what I have so far: <accordion> <accordion-group ng-repeat="d in dimensions" heading="{{d.name}}"> {{d.description}} </accordion-group> </accordion> Right now, it displays the accordions in a line straight down the page, like so: Acc1 Acc2 Acc3 Acc4 Acc5 Acc6 I would like...

overriding ng-click from bootstrap

angularjs,twitter-bootstrap,carousel,angular-ui-bootstrap
Suppose I am customizing an angularjs bootstrap carousel and making it as a directive. I want to customize the current function that the ng-click calls on each left/right arrow so it calls a custom function before the original function defined in the bootstrap. I know calling multiple functions in ng-click...

Multiple Datepickers / Min Date Bootstrap Angular Datepicker

javascript,angular-ui-bootstrap
I'm using Bootstrap Angular Datepicker I have two issues going one here. I have two date-pickers. A Start date-picker and an End date-picker. My first issue is that when clicking on the Start Date picker both date-picker calendars appear. I've tried creating a separate function for each ng-clickon the date-picker,...

AngularJS date validation (formats)

angularjs,angular-ui-bootstrap
I could use some help. I am having input field with type="text" and ng-required="true". I am using datepicker (Angular UI Bootstrap). If my input is empty, someForm.someInput.$error returns "required":true, which is okay. If my input is filled with "someText", someForm.someInput.$error returns "date":true, which is odd to me. How is this...

Angular [$injector:unpr] Unknown provider with customize directive

angularjs,angularjs-directive,angular-ui-bootstrap
I have a little issue by using a customize directive within the template field of UI-Bootstrap modal directive. My aim is send data to modal via resolve attribute and re-use these resolved parameters inside the controller of my own directive. var app = angular.module('app', ['ui.bootstrap']); app.controller('MyCtrl', ['$scope', '$modal', function($scope, $modal)...

Dynamically change number of slides displayed in 1 frame of carousel

angularjs,carousel,angular-ui-bootstrap
I am new to AngularJS. Right now I have a reusable carousel widget that I modified to display 2 slides in one frame (I make my carousel as a directive so I can use it anywhere). I am using carousel component from angular-ui-bootstrap, and I modified it according to the...

Angular UI Bootstrap Responsive menu - closing menu when clicking off it?

angularjs,twitter-bootstrap,angular-ui-bootstrap
I've successfully created a responsive menu using Angular UI Bootstrap. The problem is: When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building. I'm looking for this...

Set angularjs directive attribute from a controller

angularjs,angularjs-directive,angular-ui-bootstrap
I'm using the Angular Bootstrap typehead directive, which can be configured from HTML like so: <div ng-controller="search"> <input typeahead-focus-first="false" /> </div> Is it possible to set the 'typeahead-focus-first' attribute from the ng-controller instead?...

Delay angular-ui modal from closing

javascript,angularjs,angular-ui,angular-ui-bootstrap
I am using angularjs with the angular-ui library (specially the angular-ui-bootstrap one). How can I delay a modal from closing? After the user clicks on the x, or Cancel button, I need the modal to stay visible for an extra half second, but I haven't found a way to do...

ng-bind-html with UI Bootstrap directives

javascript,angularjs,angularjs-directive,angular-ui-bootstrap
I don't think this is directly an issue but I don't know how to do this. I'm trying to dynamically load content that uses UI Bootstrap directives but when the content is loaded UI Bootsrap components don't work. Being more specific, tooltips don't work. Here is the important code: <div...

Dynamically add UI Bootstrap dropdowns with ng-repeat

angularjs,drop-down-menu,typescript,angular-ui-bootstrap,ng-repeat
I'm new to using AngularJS and UI Bootstrap and I'm trying to add dropdowns dynamically using ng-repeat. The problem is that when any one dropdown is clicked it triggers all of them. I'm guessing I'm doing something really stupid with my code and I would appreciate it if someone could...

AngularJs - Adding Custom class on UI-Bootstrap's Tab

javascript,angularjs,angular-ui-bootstrap,bootstrap-tabs
How can I replace or add a new class on UI-Bootsrap's Tab Nav. I'm expecting something like, <ul class="MY-CUSTOM-CLASS" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> <li ng-class="{active: active, disabled: disabled}" heading="Justified" class="ng-isolate-scope"> <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Justified</a> </li> ..... </ul> I've tried the following but, it's adding the class to the...

Angular UI Bootstrap DatePicker initDate Issue

angularjs,datepicker,angular-ui-bootstrap
I am trying to set init-date in angular bootsrap's datepicker directive. And I am getting the below error Error: [$parse:syntax] Syntax Error: Token 'Jun' is an unexpected token at column 5 of the expression [Sun Jun 21 2015 17:00:00 GMT-0700 (PDT)] starting at [Jun 21 2015 17:00:00 GMT-0700 (PDT)]. Below...

AngularJS/Bootstrap - Datepicker range filter issues

angularjs,datepicker,angular-ui-bootstrap
I am using DataTables (http://www.datatables.net/) and Bootstrap datepicker. Here is my JSFiddle: http://jsfiddle.net/wg3b6y7m/ and the code for the daterange filter: function (oSettings, aData, iDataIndex) { if ($('#min').val() == '' && $('#max').val() == '') { return true; } if ($('#min').val() != '' || $('#max').val() != '') { var iMin_temp = $('#min').val();...

Setting attrs dynamically for ui-bootstrap tooltip / popover

angularjs,angular-ui-bootstrap
I'm trying to programmatically toggle tooltips (like mentioned here: http://stackoverflow.com/a/23377441) and got it fully functional except for one issue. In order for it to work I must have tooltip-trigger and tooltip attributes hardcoded as follows: <input type="text" tooltip-trigger="show" tooltip="" field1> In my working directive, I'm able to change the tooltip...

How to use Angular UI Bootstrap with Laravel 5

laravel-5,angular-ui-bootstrap
I am using Angular UI Bootstrap with my Laravel Framework 5. I am using Rating directive. I see following error : TypeError: Cannot read property '0' of null at Object.ib.functionCall (angular.js:12405) at n.$get.n.$digest (angular.js:14300) at n.$get.n.$apply (angular.js:14571) at eg.$$debounceViewValueCommit (angular.js:23391) at eg.$setViewValue (angular.js:23363) at HTMLInputElement.l (angular.js:19784) at HTMLInputElement.m.event.dispatch (jquery.js:4670) at...

Uncaught TypeError: X[g].exec is not a function fb tokenize

angularjs,twitter-bootstrap,angular-ui-bootstrap,typeerror,toastr
Since today I am getting an error as follows: Uncaught TypeError: X[g].exec is not a function fb tokenize This is the stack trace: Uncaught TypeError: X[g].exec is not a function fb.tokenize @ jquery.min.js:2 fb.compile @ jquery.min.js:2 fb.select @ jquery.min.js:2 fb @ jquery.min.js:2 m.event.handlers @ jquery.min.js:3 m.event.dispatch @ jquery.min.js:3 r.handle @...

Can't get file upload to work in angular UI modal window

angularjs,angular-ui,angular-ui-bootstrap,jquery-file-upload
Here is a plunker example of something that i'm trying to do: http://plnkr.co/edit/dlktEzrBeFshGaZsTmg7?p=preview Basically i just want to use jquery file upload inside the modal window. as you can see in the plunker though, none of the callbacks are being called. $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { $log.log("done...

angular-ui: Trigger events on Carousel

javascript,angularjs,twitter-bootstrap,angular-ui,angular-ui-bootstrap
I'm using angular-UI's Carousel and i want to trigger the "prev" and "next" events from my controller. There was issue about it on Github, but its seems not to be handled actually: https://github.com/angular-ui/bootstrap/issues/1836 the Carousel page with the plunker example: http://angular-ui.github.io/bootstrap/ Any idea on the best approach ? Thank you!...

Angularjs - Resize bootstrap modal after modal is shown

javascript,angularjs,angular-ui-bootstrap
I am still fairly new to angularjs and am currently porting a existing spa javascript application to the angularjs framework. I am using the ui-bootstrap directive for creating bootstrap modals. I am trying to re-position the modal in the middle of the screen once the modal is displayed on the...

Angular ui-bootstrap: Modal not dismissed on backdrop click

angularjs,twitter-bootstrap,angular-ui,angular-ui-bootstrap
When using ui-bootstrap version 0.13, the modal is not dismissed in the event of a click to the backdrop. (even if backdrop is not set to 'static') $modal.open({ ... backdrop: true, ... }); The problem is illustrated in this plunker. The second version of the plunker shows that the same...

Getting `undefined` when using ng-repeat and radio buttons

angularjs,twitter-bootstrap-3,angular-ui-bootstrap
I am encountering a strange behavior when using Angular's ng-repeat on a Bootstrap UI modal. I have this dummy method in my customerService.js factory: app.factory('customerService', [ function() { customerFactory.getCustomers = function () { return [{ "name": "Terry Tibbs" }, { "name": "Bobby Halls" }, { "name": "Garry Brisket" }] };...

How to use bootstrap accordian with AngularJS?

html,angularjs,twitter-bootstrap,angular-ui-bootstrap
How can i create bootstrap accordion using AngularJS , I have implemented UI-bootstrap accordion but its not working. I am new to AngularJS any help will be appreciated. I can not use jsfiddle/plunker. So far tried code.... boot.html <accordion close-others="false"> <accordion-group heading="Process Rating" is-open="open.processRating"> <accordion-heading> <small>Process Rating<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':...

Angular Bootstrap Modal leaves backdrop open

angularjs,angular-ui,angular-ui-bootstrap,bootstrap-modal
I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals. I'm calling a Modal in my controller like so: var modalInstance = $modal.open({ animation: true, templateUrl: '/static/templates/support-report-modal.html', controller: 'ModalInstanceCtrl' }); Unfortunately, when I want to close the Modal by using: modalInstance.close(); The modal itself dissapears,...

Angular-ui bootstrap datepicker won't openup twice

angularjs,twitter-bootstrap,angular-ui-bootstrap
I am using the angular-ui bootstrap datepicker component. on one view where I have two date fields, the datepicker opens up and after closed it opens up again when clicked fine. On another page, after once opened and closed, the datepicker does not open up anymore. Surely I'm missing something...

Clicking on angular ui tabs fires event many times

javascript,angularjs,tabs,angular-ui-bootstrap
I have 15 tabs using angular ui tabs like this This is template <tabset justified="true"> <tab heading="{{ tab.display }}" select="tsc.selectTab(tab.date)" ng-repeat="tab in tsc.tabs"> <div ng-include="'entries.html'"></div> </tab> </tabset> This is controller $scope.activeTabDate = ''; self.selectTab = function (tabDate) { $scope.activeTabDate = tabDate; }; Now This is my child controller for entries.html...

Bootstrap - On selection change in dropdown, make the text control mandatory

angularjs,twitter-bootstrap,twitter-bootstrap-3,angular-ui-bootstrap
I have a select control and a text control in my form. When there is a change in the selection (when user selects a particular value), i want the text control to be made mandatory. This text control should not be mandatory when the form is opened. Is this possible?...

Button Click Event from inside a modal not firing when using angular.js and ui.bootstrap

javascript,angularjs,angular-ui-bootstrap,bootstrap-modal
I am very new to ui.bootstrap and angular js. i have a very peculiar issue when using bootstrap modal with agular js. i am using boostrap ui's web site for my reference. below is the code snippet i am using. in the user directive, for add new user button click,...

Reload List after Closing Modal

angularjs,twitter-bootstrap,angular-ui-bootstrap
I have a list of brands: <script type="text/ng-template" id="list.brands"> <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl"> <input type="text" ng-model="searchBox"> <thead> <tr> <th><tags:label text="brandid"/></th> <th><tags:label text="name"/></th> <th><tags:label text="isactive"/></th>...

AngularJS ui-bootstrap accordion cannot access variable outside accordion in filtered ng-repeat

angularjs,angularjs-ng-repeat,angular-ui-bootstrap
I am using AngularJS UI Bootstrap's accordion. I am using ng-repeat with filter inside the accordion. Now the problem is that I cannot access the filtered variable outside <accordion>. If I ditch the accordion and use simple HTML it works fine. <div ng-app="myApp"> <div ng-controller="AccordionCtrl"> <div>outside accordion{{filteredCampaigns}}</div> <input type="text" ng-model="q"...

Object values not persisting

angularjs,accordion,angular-ui-bootstrap
http://plnkr.co/edit/KEhcaEs2GptBlF60KAXi?p=preview I'm trying to create an accordion with multiple options in each group. Once a selection is made in a group the group below it is enabled and expanded to allow for the next selection. I got the UI to work, but when I store the selection it gets overridden...

AngularUI element inside tab not accepting height

twitter-bootstrap,angular-ui-bootstrap
I am trying to add dynamic height for the element which is inside the tabset element Here is the plunker which describes the issue http://plnkr.co/edit/IoBIkV0spK7mxPuK6As7?p=preview I am trying to set the height for the div with id test any help would be appreciated HTML: <tabset class="Tab"> <tab class="tab1" heading="Static title1">...

Datepicker ui.bootstrap on angularjs 1.3.11

angularjs,angular-ui-bootstrap
this is my base app with angulajs 1.3.11 & ui.bootstrap. My Datepicker won't work. The date calendar don't show. Why? Thank's a lot. <!DOCTYPE html> <html ng-app="app"> <head> <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="[email protected]*"...

Modal Popup not Closing if multiple Modals are present

javascript,angularjs,twitter-bootstrap,angular-ui-bootstrap
I have three different controllers and views From Screen when button is clicked Modal1 opens $modal.open({ templateUrl: 'abc.html', controller: 'abcCtrl', size: 'lg', scope: $scope, }); In modal1 there is next button so on Click of Next Button Want to close Modal1 and open Modal2 $scope.validate = function(isValid) { if (!isValid)...

Hide Angular UI Bootstrap popover when clicking outside of it

javascript,angularjs,twitter-bootstrap,angular-ui-bootstrap
I am trying to manually close a bootstrap popover to get it to close when I click anywhere on the document or body that isn't the popover. The closest thing I have found to accomplishing this is to create a directive (found this answer) but this is for a manual...

Bootstrap collapse and ui-rooter

javascript,angularjs,angular-ui-router,bootstrap,angular-ui-bootstrap
I have issue with ui-router and using bootstrap collapse. <div class="panel panel-default" id="accordion" > <div role="tab" id="headingOne"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Click me </a> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> Data </div> </div> This is page localhost/#/root/mypage/. So the 'Click me' is pointed to...

Show navbar-nav horizontally in mobile screen

html,css,twitter-bootstrap,twitter-bootstrap-3,angular-ui-bootstrap
The code below shows horizontally in normal desktop view. However, on mobile screen, it shows vertically. <ul class="nav navbar-nav"> <li>Link 1</li> <li>Link 2</li> </ul> Web View: Link 1 Link 2 Mobile View: Link 1 Link 2 I want to show the Mobile view horizontally. Trying to find the right css...

angularjs select the first value in select box

javascript,angularjs,bootstrap,angular-ui-bootstrap,angularjs-ng-options
I need to highlight the first value 'fullName' in select box using angularjs. I am using angularstrap selectbox. controller, $scope.accountInfo.owners = [ { "accounts":null, "phoneumber":null, "email":null, "fullName":"MITA DASGUPTA", "mobilePhoneNumber":null, "noteFlag":false, "number":130000000484 } ] Template, <button type="button" class="btn btn-default" placeholder="Pleasae select" data-ng-model="owner.fullName" data-html="1" bs-options="owner as owner.fullName for owner in accountInfo.owners" bs-select>...

Angularjs ui bootstrap modal sharing information to same controller

javascript,angularjs,angular-ui-router,angular-ui-bootstrap
I have the following modal set up in my cloud controller. I'm not giving this modal a specific controller to work off of because the goal is to share it with my cloud controller. I don't tell the modal that it should be using the cloud controller because then the...

translate angular-ui's pagination text angularjs

javascript,angularjs,pagination,angular-ui-bootstrap,angular-translate
i'm been working one a webpage where i use angularjs and angular-ui. And i use the pagination from angular-ui. Now i need to change the next and previous button text after what language $translate are assigned to. I tried to do it inline like this <pagination previous-text="{{'PREVIOUS' | translate}}" </pagination>...

Use angular-ui timepicker as input form

angularjs,input,angular-ui-bootstrap,timepicker
I'm using angular-ui timepicker according to the example here. This is my HTML: <timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker> In the js file, I'm trying to get the value with var start_hour = { hour:new Date($scope.hour).getHours(), min:new Date($scope.hour).getMinutes() }; But it's only works if I set a new date in...

How put AngularJS + AngularJS UI (Utils + Bootstrap) into Grails? [closed]

angularjs,grails,angular-ui-bootstrap,angularjs-ui-utils
I need to put into Grails 2.4.4 this: AngularJS v1.3.15 AngularJS UI Utils v0.2.3 AngularJS UI Bootstrap v0.2.11 Bootstrap CSS v3.3.4 (needed by AngularJS UI Bootstrap) JQuery? not sure if needed I saw some plugins for Grails that add AngularJS but none that add AngularJS UI's. How to simply put...

Angular Modal Service does not gray out background

angularjs,angular-ui-bootstrap
I have the following sample at plunkur click here to open link var app = angular.module('App', ['ui.bootstrap']); try { app.service('loginModalService', function ($modal, $rootScope) { function assignCurrentUser(user) { $rootScope.currentUser = user; return user; } return function () { var instance = $modal.open({ templateUrl: 'loginModalTemplate.html', controller: 'LoginModalCtrl', controllerAs: 'LoginModalCtrl', windowClass: 'vertical-center', backdrop:...

handle expand event of bootstrap accordion placed inside tabs

angularjs,twitter-bootstrap,accordion,angular-ui,angular-ui-bootstrap
I have placed accordion inside tabs using Angular Bootstrap but I am unable to handle the expand event of accordion pane. Here is the fiddle: http://jsfiddle.net/vruqw9s8/ $(function () { $('accordion').on('show.bs.collapse', function () { alert('accordion change'); }); }); ...

Angularjs Ui grid grouping formatting is needed

angularjs,angularjs-directive,angular-ui,angular-ui-bootstrap,angular-ui-grid
I am using Angularjs ui grid grouping functionality. Please see the image, When displaying group sum, by default it is getting displayed as 'total :' but I want to change it to 'Total' (capital 'T') and also I want to restrict aggregated totals to 2 decimal numbers. Where I need...

Init-Date in UIBootstrap datePicker

angularjs,datepicker,angular-ui-bootstrap
I'm currently working on a angular datepicker. To do so, I use the UIBootstrap datepicker. But I'm facing a problem. I need to use the init-date attribute : init-date : The initial date view when no model value is specified. The attribute seems to be available only on the datepicker...

How to include only specific parts of UI Bootstrap using Grunt

gruntjs,angular-ui-bootstrap,bower
I'm using the accordion, tooltips and transition components of UI Bootstrap. I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead. However, I don't want to use the...

Unable to change alert color in UI Bootstrap

angularjs,twitter-bootstrap-3,angular-ui-bootstrap
I am trying to change the colors for alerts using UI Bootstrap similar to the example on the the UI Bootstrap homepage. But when I use the code below, the alerts are all in the alert-warning color. Any thoughts on what I'm doing wrong? HTML: <div ng-controller="AlertFormCtrl as alertForm ">...

UI.Bootstrap Angular Typeahead and Firebase Array

javascript,arrays,angularjs,twitter-bootstrap,angular-ui-bootstrap
Alright, I've tried and tried and tried to get this one right, But haven't. I am trying to use Typeahead in the UI.Bootstrap for Angular JS with a Firebase Array as the data set. Problem is, I can't get any results to show up when I type in the text...

Refresh Angular-ui bootstrap $scope

javascript,angularjs,angular-ui-bootstrap
So I have let's say: $scope.errorMessage = "error1"; $scope.addCardModal = $modal.open({ animation: true, templateUrl: 'pages/templates/modals/modal.html', size: "lg", scope: $scope }); $scope.checkError = function() { $scope.errorMessage = "another error"; } And in my modal.html template I have: <div ng-click="checkError()">Check Error</div> <div ng-show="errorMessage">{{ errorMessage }}</div> <div ng-click="errorMessage = false">Close</div> When I load...

Angular custom directive for Datepicker, popup issue

angularjs,angularjs-directive,datepicker,angular-ui,angular-ui-bootstrap
I have created a custom directive using angular UI datepicker. Angular UI datepicker popup should get opened on button click event. This button click event is getting fired and is-open boolean value is being set to true, But the popup is not showing. Please advise. Plunker Link: http://plnkr.co/edit/wszoqlmIzS6h3majJrnN?p=preview...

pass simple parameter to angular ui-bootstrap modal?

javascript,angularjs,twitter-bootstrap,angular-ui-bootstrap
I see many posts about posting many complicated things to ui-bootstrap modals, but I just want to pass a simple parameter so that I might use it to display different content in the dialog. For example, I have the main document which has MyDocumentController as mydoc In MyDocumentController is a...

Bootstrap ui empty carousel

angular-ui-bootstrap
I have some strange issue. I use an carousel from bootstrap ui in a modal box from bootstrap. At the beginning is init the images for the carousel. Then i click on a button to show the modal box. This time they appear correctly. But then i reinit the carouseldata...

Angular UI Bootstrap Timepicker - value assignment issue with 24hr times

angularjs,angular-ui-bootstrap
The timepicker is not handling 24hr time assignment correctly. For e.g. <timepicker ng-model="$time" hour-step="1" minute-step="1" show-meridian="true"></timepicker> When I do: $scope.$time = "2012-04-23T18:25:43Z", the timepicker is updated to 06:25 AM. It should be 06:25 PM. Even if I set show-meridian="false", it's still showing 06:25....

unable to search submenu items without holding on to mouse click in Angularjs application

javascript,angularjs,angular-ui,angular-ui-bootstrap
I am trying to provide search text box for sub menu. Even though it is working fine, I need to keep on holding the mouse to enter the searching text, the moment I leave out the mouse the submenu is closing and I am not able to enter my search...

Angular radio button doesn't pick an initial value

angularjs,radio-button,angular-ui,angular-ui-bootstrap
I have a radio button with two available values - male and female when the value of male is true and female is false. <div id="gender" class="btn-group"> <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="true" uncheckable>Male</label> <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="false" uncheckable>Female</label> </div> In the controller code, I get the existing value in...

Angularjs ui grid with grouping column sequence is getting jumbled up

angularjs,angularjs-directive,angular-ui,angular-ui-bootstrap,angular-ui-grid
I am using AngularJs ui grid with grouping. The table is displaying fine but the problem I am facing is that the months sequence in the table is getting jumbled up. Please find my Plunker. In the table the Months are appearing in the jumbled up sequence 11-14, 05-15, 04-15,...

AngularJS/Bootstrap - Select row and open details in modal with button

angularjs,angular-ui-bootstrap,bootstrap-modal
I'm using AngularJS, Bootstrap, and data-toggle to open a modal. I want to click on a row in a table, get the index number and store it, and click a button to open a modal that displays more details for that row using the stored index. My code right now...

Angular UI Bootstrap datepicker half date coloring

css,twitter-bootstrap,angular-ui-bootstrap
I have a question that is similar to this question on jQuery datepicker show half day blocked I need to style a date field diagonally. For example, in booking calendars when people are leaving in the morning or coming at the afternoon....