Search Posts

Category: angular-ui-bootstrap

Watch functions accumulate when Angular UI modal is opened

I have the following code in a directive. The directive is included in an Angular UI modal: var watchObjects = function(){ scope.vars.forEach(function(elem,i){ scope.$watch(‘vars[‘+i+’].obj’, function(newValue, oldValue) { if (typeof newValue === ‘undefined’) return; console.log(newValue) }); }); }; When the modal is opened and the directive is loaded, in the link function I invoke watchObjects only the fist time I open the modal. If I call watchObjects every time I open the modal, the number of watch […]

Select active tab in uib-tabset ui-bootstrap angularjs

I’m trying to select active tab with uib-tabset in ui-bootstrap library. Seems like that setting active=”1″ or active=”0″ has no effect on the active tab. documentation is in here https://angular-ui.github.io/bootstrap/ Example: <uib-tabset active=”1″> <uib-tab heading=”tab1″ index=”0″> …….. </uib-tab> <uib-tab heading=”tab2″ index=”1″> ………. </uib-tab> </uib-tabset> Source: AngularJS

How to add time picker in datepicker html javascript?

I am implementing datepicker but I want to add time picker also. Now I am selecting date and time separately. but I want to select date and time in sequence after one click. I want to implement like this http://embed.plnkr.co/MtQK3wsHtf1hy1F9A5rg/ But I want to consider 24hrs clock. angular.module(‘ui.bootstrap.demo’, [‘ngAnimate’, ‘ngSanitize’, ‘ui.bootstrap’]); angular.module(‘ui.bootstrap.demo’).controller(‘DatepickerPopupDemoCtrl’, function ($scope) { $scope.today = function() { $scope.dt = new Date(); }; $scope.today(); $scope.clear = function() { $scope.dt = null; }; $scope.inlineOptions = […]

Event registration in directive embedded in $uibModal

I have a modal (using Angular-Bootstrap’s $uibModal) and this modal hosts a directive <my-directive>. This directive is designed to be reusable in multiple containers and hence it communicates with the directive-container only via events (also, using events because using $watch would be inefficient). The directive accepts an event “addNew” and registers that event in the directive’s link function using scope.$on() The $uibModal‘s controller dispatches the “addNew” event in the controller immediately after the modal is […]

Angular bootstrap datepicker(uib-datepicker) not apply to new added elements

I have a filed with uib-datepicker that added to DOM with jQuery after page load. Now when I focus to field, datepicker not shown! create and append date picker field var dateInput = $compile(“<input type=’text’ class=’date-filter’ ng-model=’dateFilter’ uib-datepicker-popup=’yyyy-MM-dd’ is-open=’datePicker[1]’ ng-focus=’openDatePicker($event, 1)’>”)($scope); $(‘#wapper’).append(dateInput); open datepicker $scope.datePicker = []; $scope.openDatePicker = function ($event, datePickerIndex) { $event.preventDefault(); $event.stopPropagation(); $scope.datePicker[datePickerIndex] = true; }; It can be said: uib-datepicker not apply to filed at all! What’s the problem? Source: AngularJS

uib typeahead to be integrated with existing dropdown

I need to integrate uib-typeahead directive into a dropdown. So when they start typing an auto complete should come, if they choose the drop- down instead it should show the list of Items from the drop-down <div id=”parentDiv “> <select class=”form-control ” ng-model=”$ctrl.name” ng-change=”$ctrl.selectName()” ng-options=”person.name for person in $ctrl.people “> <option value=” “></option> </select> <input type=”text” class=”form-control app-input” placeholder=”Name” ng-model=”$ctrl.name” required> </div> This works, when I override the style to the input hover on top […]

AngularJS Bootstrap Modal $modalInstance.dismiss is not a function

When I click the cancel button on my modal, the $modalInstance.dismiss function binded with ng-click on my modal template isn’t working. The console has been throwing the error: “$modalInstance.dismiss is not a function” MODAL TEMPLATE: <div class=”my-modal ng-scope” id=”my-modal”> <div class=”modal-header”> <h3 class=”modal-title” id=”modal-title”>Create a new room</h3> </div> <div class=”modal-body” id=”modal-body”> <form> Enter a room name<br> <input type=”text” name=”new-room-name”> </form> <div class=”modal-footer”> <button class=”btn btn-warning” type=”button” ng-click=”modal.cancel()”>Cancel</button> <button class=”btn btn-primary” type=”button” ng-click=”modal.save()”>Create Room</button> </div> </div> […]

TypeError: Cannot read property ‘toLowerCase’ of undefined in Angular Js [on hold]

angular.js:12477 TypeError: Cannot read property ‘toLowerCase’ of undefined at HTMLAnchorElement.<anonymous> (layout.min.js:1) at Function.each (eval at <anonymous> (jquery.min.js:2), <anonymous>:2:2881) at n.fn.init.each (eval at <anonymous> (jquery.min.js:2), <anonymous>:2:846) at s (layout.min.js:1) at Object.initSidebar (layout.min.js:1) at main.js:667 at b.$emit (angular.js:16238) at angular.js:24340 at angular.js:14745 at n.$eval (angular.js:15989) Source: AngularJS

angular ui bootstrap popover open programmatically

I am trying to open the popover dynamically by setting popover-is-open property to true dynamically from the controller like this: var el = angular.element(target.id); //popover attached to this element el.attr(‘popover-is-open’,true) //setting attribute to true $compile(el.contents())($scope) //recompiling $scope.$digest();//running digest Here is the html <div id=”taskcard-{{task.externalId}}” popover-append-to-body=”true” popover-trigger=”‘none'” popover-is-open=”false” uib-popover-template=”templateurl” popover-title=”testing”> POPOVERS </div> Now, this doesn’t work. Is there any other way around this? Source: AngularJS

Next Page »