Currently, the bootstrap classes are embedded in the directive and need to be overridden. If you want to prevent that vertical ‘drift’ into position of the modal window, place the following 2 classes in your css : .modal.fade { opacity: 1; } .modal.fade .modal-dialog, .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, … Read more
The typeahead directive from http://angular-ui.github.io/bootstrap/ is very, very flexible and there are many ways of achieving the desired functionality. I’m presenting 2 of them here. Firstly, the typeahead directive uses syntax very similar to the AngularJS select directive. This gives you full control over a displayed label and the data bound as model value. So … Read more
You can’t use interpolation inside standard property binding. There should be an expression. Seems it should be: [attr.aria-labelledby]=”‘desiredSkill’ + $index” or attr.aria-labelledby=”desiredSkill{{$index}}”
I was looking for an answer to this as well, for the longest time. I finally found a resolution that worked for me. I ended up setting the NgModel to an empty string within the typeahead-on-select attribute: In your typeahead-on-select attribute add asyncSelected = ”; behind your select function, like so: <input … typeahead-on-select=”selectMatch(asyncSelected); asyncSelected … Read more
so create a reusable service for that… read here code here: angular.module(‘yourModuleName’).service(‘modalService’, [‘$modal’, // NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal function ($modal) { var modalDefaults = { backdrop: true, keyboard: true, modalFade: true, templateUrl: ‘/app/partials/modal.html’ }; var modalOptions = { closeButtonText: ‘Close’, actionButtonText: ‘OK’, headerText: ‘Proceed?’, bodyText: ‘Perform this … Read more
Updated: I added the directive to github for easy updates and access. You can now install it as a dependency through bower. Original post: I came up with a pretty clean hack that does not require any changes to ui-bootstrap-tpls. The Idea is to use $setViewValue() to trigger the popup with a combination of a … Read more
NOTE: Most answers here are outdated! The main issue is that the dropdown directive is not available as a class anymore, but only as an attribute, and that it has been renamed to uib-dropdown. I was stuck here for a while, but changing the class into an attribute worked as a charm. Also, you need … Read more
There is a bootstrap 3 branch going on in angular UI bootstrap, and almost everything has been migrated to bootstrap 3 in this branch. You can build this branch by yourself, and it’s a matter of days or weeks before an official release that supports bootstrap 3 is made. You should go with it.
Actually this is really simple as each pane exposes the active attribute that supports 2-way data binding: <tabs> <pane ng-repeat=”pane in panes” heading=”{{pane.title}}” active=”pane.active”> {{pane.content}} </pane> </tabs> and then an active tab can be easily found, for example: $scope.active = function() { return $scope.panes.filter(function(pane){ return pane.active; })[0]; }; Here is a working plunk
For Angular Version 11+ Configuration The styles and scripts options in your angular.json configuration now allow to reference a package directly: before: “styles”: [“../node_modules/bootstrap/dist/css/bootstrap.css”] after: “styles”: [“bootstrap/dist/css/bootstrap.css”] “builder”: “@angular-devkit/build-angular:browser”, “options”: { “outputPath”: “dist/ng6”, “index”: “src/index.html”, “main”: “src/main.ts”, “polyfills”: “src/polyfills.ts”, “tsConfig”: “src/tsconfig.app.json”, “assets”: [ “src/favicon.ico”, “src/assets” ], “styles”: [ “src/styles.css”,”bootstrap/dist/css/bootstrap.min.css” ], “scripts”: [ “jquery/dist/jquery.min.js”, “bootstrap/dist/js/bootstrap.min.js” ] … Read more