angular-ui-bootstrap

In the AngularJS BootstrapUI Typeahead, what’s $viewValue?

by

here is a working typeahead example: <div class=”container”> <div ng-controller=”mainCtrl” class=”row-fluid”> <form class=”row-fluid”> <div class=”container-fluid”> <input type=”text” ng-model=”selected” typeahead=”state for state in states | filter:$viewValue” /> </div> </form> </div> </div> <script> angular.module(‘myApp’, [‘ui.bootstrap’]) .controller(“mainCtrl”, function ($scope) { $scope.selected = ”; $scope.states = [‘Alabama’, ‘Alaska’, ‘Arizona’, ‘Arkansas’, ‘California’, ‘Colorado’, ‘Connecticut’, ‘Delaware’, ‘Florida’, ‘Georgia’, ‘Hawaii’, ‘Idaho’, ‘Illinois’, … Read more

AngularJS UI Bootstrap Tabs that support routing

by

To add routing you typically use an ng-view directive. I’m not sure it’s easy enough to modify angular UI to support what you’re looking for, but here’s a plunker showing roughly what i think you’re looking for (it’s not necessarily the best way of doing it – hopefully someone can give you a better solution … Read more

How to close Angular UI Modal from anywhere

by

Inject the $modalStack service and call the function $modalStack.dismissAll(), see the code on GitHub for details: myApp.factory(‘ModalService’, [‘$modal’, ‘$modalStack’ function($modal, $modalStack) { return { trigger: function(template) { $modal.open({ templateUrl: template, size: ‘lg’, controller: function($scope, $modalInstance) { $scope.ok = function() { $modalInstance.close($scope.selected.item); }; $scope.cancel = function() { $modalInstance.dismiss(‘cancel’); }; } }); }, close: function(reason) { $modalStack.dismissAll(reason); … Read more

ui-bootstrap pagination resetting current page on initialization

by

So I found a solution after drilling down into the angular-bootstrap code. Their code has a watch on totalPages that checks if the current page is greater than the totalPages value. angular-bootstrap code: if ( $scope.page > value ) { $scope.selectPage(value); } else { ngModelCtrl.$render(); } What was happening was if I refreshed the page … Read more

How to have at least two datepickers of ui-bootstrap on a single page?

by

Rather than using a different function you can use a different is-open attribute and then pass the attribute in through the ng-click function. You still need different models: <div> <div class=”form-horizontal pull-left”> <input type=”text” datepicker-popup=”dd-MMMM-yyyy” ng-model=”dt1″ is-open=”opened1″ min=”minDate” max=”‘2015-06-22′” datepicker-options=”dateOptions” date-disabled=”disabled(date, mode)” ng-required=”true”/> <button class=”btn” ng-click=”open($event,’opened1’)”><span class=”glyphicon glyphicon-calendar”></span></button> </div> <div class=”form-horizontal pull-left”> <input type=”text” datepicker-popup=”dd-MMMM-yyyy” … Read more

How to use angular component with ui.bootstrap.modal in angular 1.5?

by

EDIT: As of UI Bootstrap 2.1.0 there is native support for component in bootstrap modals. It looks like there have been several quick releases after 2.1.0 to fix some issues with the modals, so I’d be sure to grab the latest. See this Plunk for a version using UI Bootstrap 2.1.0+ http://plnkr.co/edit/jy8WHfJLnMMldMQRj1tf?p=preview angular.module(‘app’, [‘ngAnimate’, ‘ui.bootstrap’]); … Read more

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

by

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

AngularJS/Angular-ui-bootstrap Changing language used by the datePicker

by

If you are using the DatePicker form angular-ui simply add the localized js file in the header of your page. An example would be : <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js”></script> <script src=”http://code.angularjs.org/1.0.8/i18n/angular-locale_fr-fr.js”></script> <script src=”http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js”></script> You can see a working plunker here