angular-ui-bootstrap

Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?

You can also build your own extended triggers. This will apply to both Tooltip and Popover. First extend the Tooltip triggers as follows: // define additional triggers on Tooltip and Popover app.config([‘$tooltipProvider’, function($tooltipProvider){ $tooltipProvider.setTriggers({ ‘show’: ‘hide’ }); }]); Then define the trigger on the HTML tag like this: <div id=”RegisterHelp” popover-trigger=”show” popover-placement=”left” popover=”{{ ‘Login or … Read more

How to usemultiple Angular UI Bootstrap Datepicker in single form?

I have 30 in one form one controller no problem. use the same concept if you need it on ng-repeat. <label>First Date</label> <div class=”input-group”> <input type=”text” class=”form-control” datepicker-popup=”{{format}}” name=”dt” ng-model=”formData.dt” is-open=”datepickers.dt” datepicker-options=”dateOptions” ng-required=”true” close-text=”Close” /> <span class=”input-group-btn”> <button class=”btn btn-default” ng-click=”open($event,’dt’)”> <i class=”glyphicon glyphicon-calendar”></i></button> </span> </div> <label>Second Date</label> <div class=”input-group”> <input type=”text” class=”form-control” datepicker-popup=”{{format}}” name=”dtSecond” … Read more

Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

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

Angular bootstrap datepicker date format does not format ng-model value

Although similar answers have been posted I’d like to contribute what seemed to be the easiest and cleanest fix to me. Assuming you are using the AngularUI datepicker and your initial value for the ng-Model does not get formatted simply adding the following directive to your project will fix the issue: angular.module(‘yourAppName’) .directive(‘datepickerPopup’, function (){ … Read more

How do I increase modal width in Angular UI Bootstrap?

I use a css class like so to target the modal-dialog class: .app-modal-window .modal-dialog { width: 500px; } Then in the controller calling the modal window, set the windowClass: $scope.modalButtonClick = function () { var modalInstance = $modal.open({ templateUrl: ‘App/Views/modalView.html’, controller: ‘modalController’, windowClass: ‘app-modal-window’ }); modalInstance.result.then( //close function (result) { var a = result; }, … Read more

Model in a modal window in angularjs is empty

Try to change the $scope.testField into $scope.myModel.testField (or user.firstName…) As mentioned in this video angular JS – best practice (29:19): “Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong.” See updated plunker http://plnkr.co/edit/z1ABPEUB7Nxm1Kxey9iv?p=preview NOTE: with a nice reminder of the video-minute from … Read more

Hide Angular UI Bootstrap popover when clicking outside of it

UPDATE: With the 1.0 release, we’ve added a new trigger called outsideClick that will automatically close the popover or tooltip when the user clicks outside the popover or tooltip. Starting with the 0.14.0 release, we’ve added the ability to programmatically control when your tooltip/popover is open or closed via the tooltip-is-open or popover-is-open attributes.

How to add bootstrap in angular 6 project? [duplicate]

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

How do I create an AngularJS UI bootstrap popover with HTML content?

UPDATE: As can been seen in this, you should now be able to do this without overriding the default template. ORIGINAL: As of angular 1.2+ ng-bind-html-unsafe has been removed. You should be using the $sce service Reference. Here is a filter for creating trusted HTML. MyApp.filter(‘unsafe’, [‘$sce’, function ($sce) { return function (val) { return … Read more