FAQ Database Discussion Community


Angular UI Bootstrap Datepicker - add custom function to template

angularjs,twitter-bootstrap-3,datepicker,angular-ui,angular-ui-bootstrap
I want to specify color of Angular UI date cells, by adding color for cells, so I override default template with something like this: <!-- things from pasted default template, here I change something --> <!-- btn-danger instead btn-info for clicked date, test if I can change anything--> <!-- call...

AngularJS service not setting data correctly

angularjs,angular-ui-router,angular-ui
I have this service: myApp.factory('Auth', function() { var user; return { setUser: function(aUser) { user = aUser; }, isLoggedIn: function() { return (user) ? user : false; } } }); And i'm injecting it into my controller "loginCtrl" and setting the user: myApp.controller('loginCtrl', ['$scope', '$http', '$state', 'Auth', function($scope, $http, $state,...

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,...

ui.router: why is url parameter empty for a parent state when navigating to its child

angularjs,angular-ui-router,angular-ui
I am trying to get a url parameter at the parent state when navigating to its child states, but at the parent state level, the url parameter is returned as an empty string "". Here's my state config definition: $stateProvider .state("view", { url: "/{viewName}", controller: function($scope, $stateParams){ $scope.viewName = $stateParams.viewName;...

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...

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...

How to use a separated template in ui-router?

javascript,angularjs,angular-ui-router,angular-ui
I have an angular app that uses ui-router for view routing. I have a master template with all my layout, and inside that I have my ui-view like below: <div class="content" ui-view> <div> and my routes in app: app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $stateProvider .state("customers", { url: "/customers", templateUrl:...

UI Design for web application

jquery-ui,user-interface,angular-ui
I am planning to create a web application based on java, jsp and struts. I have sketched the requirement and how functionality should work and who the target users would be. Even though I am very excited about the application, I am not sure how should I create a good...

Refresh Events In Angular Calendar UI (Fullcalendar) With Laravel As A Backend

angularjs,laravel,fullcalendar,angular-ui
I am trying to make an automated refresh calendar. I am using Calendar UI and i am getting data from my backend in this way /**Calendar Config***/ //config object $scope.uiConfig = { calendar:{ height: 500, width: 800, editable: false, //First Hour firstHour: 8, //Devide by half hour slotMinutes: 30, //default...

Angular-UI tooltips on d3.js svg elements

javascript,angularjs,svg,d3.js,angular-ui
Hey I´m trying to use Angular UI tooltips on d3.js SVG elements. I´m generating the elements in a controller. context.selectAll("circle") .data(data) .enter() .append("svg:circle") .attr("tooltip-append-to-body", true) .attr("tooltip", function(d){ return d.name; }) The elements and tooltip attributes in the code are shown correctly, but no tooltips appear. When I add tooltips in...

Parsing ui.bootstrap.datepicker object

javascript,angularjs,angularjs-directive,angularjs-scope,angular-ui
I written a directive for ui.bootstrap.datepicker. (http://angular-ui.github.io/bootstrap/) It is working well but it is not parsing the date object back to the control probably once a date is selected. The date format is not applied after the date selection. Date Format not applied. Date Format applied (I want it to...

Ionic tabs : child view not showing

angularjs,angular-ui-router,ionic-framework,angular-ui,ionic
I changed the navigation of my app from side menu to bottom tabs. (tabs). It is working for the parent pages but not showing anything for the children pages. I followed the code given by the starter app and also from the doc. So here what i did : tabs.html...

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...

AngularJS ui-router - two identical route groups

angularjs,angular-ui-router,angular-ui
I have two route groups, 'anime' and 'manga'. The URLs are either /anime/ or /manga/, but they both share the exact same controllers and templates (the only thing that is different are the color schemes used for each of the templates, but those are decided in a filter that checks...

how to pass the query parameter with the othwerwise function

javascript,angularjs,angular-ui-router,angular-ui
Given the following javascript: $stateProvider .state('search', { url: '/search?query', }) ; $urlRouterProvider.otherwise("search"); When I access the page base_url?query=x I get redirected to base_url/search but the query parameter gets lost. Is there a way to pass the query parameter with the otherwise function? ...

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...

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...

UI-grid set column order

javascript,angularjs,angular-ui,angular-ui-grid
I am trying to set the initial column order for ui-grid from data that I am getting from an $http call. When configuring gridOptions.colDefs it does not appear that any properties exist for me to set with initial order. How do I go about setting the initial column order for...

How to make Angular ui grid expand all rows initially?

angularjs,angular-ui,angular-ui-grid
I am using ui grid to show a list of data and I am trying to initially expand all rows. I am trying to do this in the onRegisterApi event: scope.GridOptions = { data: properties, columnDefs: [ { name: "Full Address", field: "FullAddress" }, { name: "Suburb", field: "Suburb" },...

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 remove days from another month using UI-Calendar from UI-AngularJS?

angularjs,angular-ui
I'm using ui-calendar to build a dynamic calendar for my app. How can I remove days from another months? For example: The calendar shows April. But I don't want to show days from March and May. Obs: I can put a visibility class to the elements like that $(".fc-other-month").css({ "visibility"...

How to add guid regex in angular ui-router state

javascript,angularjs,angular-ui-router,angular-ui
I have this route .state('mystate', { url: '/{id}', templateUrl: '/views/partial.html' }); The id param should be a guid in form like this "2a542f61-5fff-4607-845d-972e6c3ad1e4". How do i add this in the url "url: '/{id:?what should i put here}'". ...

Hide Tabs Heading with Angular UI / Bootstrap UI

angularjs,angular-ui,angular-ui-bootstrap
I'm struggling to hide the heading from tabs created using Angular UI. For my solution I need to set the buttons of the tab in the header and the contents in another container on the page. I need to hide the tab buttons rendered by the directive. Any idea? <div...

Angular-ui: Is any modal opened?

javascript,angularjs,angularjs-scope,angular-ui
I'm want to launch a code if any modal opens. Commonly I'm want something like: $scope.$watch(function () { return $modal.isOpenState; }, function (val) { //my code here }, true ); But I'm didn't know what to watch. Yes, I can detect open event for each instance, like: modalInstance.opened.then(function() { //my...

Issue with Angular Js resolve method

angularjs,angular-ui-router,promise,angular-ui,angular-promise
Hi I have a $stateProvider like below. $stateProvider .state('team.details', { url: '/:teamId', views: { '@': { controller: 'teamDetailsCtrl', templateUrl: 'src/modules/team/details/teamDetails.html', resolve: { user: function ($stateParams, TeamResource) { return TeamResource.get({ teamid: $stateParams.teamId }).$promise; } The TeamResource.get is calling a rest api and everything is working fine if the data is sent...

Not getting value populated in the success callback of angular ui modal

angularjs,modal-dialog,angularjs-scope,angular-ui
I'm trying to replicate an issue in plunker but unable to do it. I've both the code exactly same but plunker still behaves differently for some reason. My issue is that I'm not getting "personModified" populated in the original code for some reason. It does work in this plunker http://plnkr.co/edit/CexDMZ32KweLxGrV1TJE?p=preview...

AngularUI Nested Routing Issue

angularjs,angular-ui-router,angular-ui
$stateProvider .state('dashboard', { url:'/dashboard', controller: 'MainCtrl', templateUrl: 'views/dashboard/main.html' }) .state('dashboard.exchange',{ templateUrl:'views/dashboard/exchange.html', controller: 'ExchangeCtrl', url:'/exchange/{exchangeId:[0-9]}', }) .state('dashboard.exchange.module',{ templateUrl:'views/dashboard/exchangeModule.html', controller: 'ExchangeModuleCtrl', url:'/module/{exchangeModuleHostName}', }) '/dashboard' correctly correctly routes to MainCtrl '/dashboard/exchange/1' correctly routes to...

AngularJS dynamically creating elements with directives ($compile) and using a singleton service

angularjs,angularjs-directive,angular-ui
I'm currently having a problem with angularJS (or my understanding of it - I come from a C# background) I'm working on a project which requires elements to be dynamically created (cloned from the consequence of being dragged 'n dropped on page). Once these elements are dropped I want them...

Angular dragdrop css class on drag

javascript,angularjs,drag-and-drop,angular-ui
I am using Angular dragdrop in my app. I need to change the color of the borders of the drop area when drag an item hover them. There is a css class i can use for this purpose? If not, how can i do that? Thank you very much...

Angular $animate.addClass callback without jquery

javascript,angularjs,angularjs-directive,angular-ui
I had jquery included in my angular project and had the following code which worked fine scope.$watch('showWhen', function(newValue, oldValue) { if (newValue) { $animate.removeClass(element, 'ng-hide', scope.afterShow); } if (!newValue) { $animate.addClass(element, 'ng-hide', scope.afterHide); } }); Now i have removed jquery, the callback function doesnt seem to be called. I guess...

Angular UI-Router more Optional Parameters in one State

javascript,angularjs,angular-ui-router,angular-ui
How can I allow optional parameters to my routes without using a query string and only using one route name? I am currently specifying each route FIVE TIMES to allow for any combination of parts: All parts must be optional. Route must resolve any variation. .state("login", { url: "/login", templateUrl:...

Angularjs + ui-bootstrap modal doesn't work properly

angularjs,angular-ui
I want to implement angular-ui modal, into my web application but when I clicked the button the modal doesnt pop out. Check out this link http://embed.plnkr.co/MT2fED8BNYZd6h4g4HnS/ The goal is to get the modal pop out as soon as I click the write button...

Why does bootstrap-ui not display correct dateFormat on load?

javascript,angularjs,angularjs-directive,angular-ui
I have downloaded bootstrap-ui and trying to use simple datePickerPopup. But when the input first loads the input doesnt display the date in the correct format? Here is plunkr http://plnkr.co/edit/Uhi7tcHONyKkKrJdBPZe here is code var app = angular.module('app', ['ui.bootstrap']); app.controller('MyController', ['$scope', function($scope) { // this value is default and should display...

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...

$modalInstance dialog box closes, but screen remains grayed out and inaccessible

angularjs,modal-dialog,angular-ui
I am using angular-ui to open and close a modal. When I close it with submit(object) or dismiss(message), the dialog box closes, but the screen remains grayed out and I can't access my app. Some code: The parent controller (relevant part): $scope.deleteConfirm = function(toDelete) { console.log(toDelete); var modalObj = {...

Change Angular ui-bootstrap datepicker day order

datepicker,angular-ui,angular-ui-bootstrap
Currently the ui-bootstrap datepicker popup orders the days of the week Mon-Sun. I have a request from a customer to reorder them Sun-Sat Interestingly, on the ui-bootstrap page, the inline example has the Sun-Mon order but the popup is Mon-Sun. Is there a way to change the day order in...

How to send the selected item from the angular-ui dropdown back to the angular controller

javascript,html,angularjs,angular-ui,angular-ui-bootstrap
Using angular-ui, consider the following: <div class="btn-group" dropdown is-open="status.isopen"> <button type="button" class="btn btn-default btn-labeled dropdown-toggle fa fa-location-arrow" dropdown-toggle ng-disabled="disabled"> Location: {{ loc }} <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li ng-repeat="choice in locations"> <a>{{choice}}</a> </li> </ul> </div> The app: var app = angular.module('Demo', ['ui.router',...

Binding scope values to ui-select-match attributes in angular's ui-select

angularjs,binding,angular-ui,angular-ui-select
I'm using AngularUI's UI-Select to create rich selects in my application, and I'm trying to bind the allow-clear attribute to a function or property on the scope: <ui-select ng-model="$parent.model" theme="bootstrap"> <ui-select-match placeholder="..." allow-clear="$parent.allowClear">{{$select.selected.DisplayText}}</ui-select-match> <ui-select-choices repeat="opt.ID as opt in operators"> {{opt.DisplayText}} </ui-select-choices> </ui-select> But no matter what I try, couldn't get...

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> ...

Stop the closing of modal popup when user clicks the background area

angularjs,angular-ui
I'm using this Angular modal popup.Could you tell me how to stop the closing of modal popup when user clicks the background area ? I mean without using the Close or Cancel button of the popup. Plunker...

Angular-Google-Maps ui-gmap-markers not visible

angularjs,google-maps,google-maps-api-3,angular-ui
I am doing a basic load of an array of markers into a google map using angular-google-maps. I am having trouble getting my directive working properly. I am not getting any errors, but the markers are not showing up. My code is below. Is there a good way to debug...

when I put ng-controller in div instead of body autocomplete stops working

angularjs,angularjs-scope,angular-ui
I have a textbox with autocomplete capability and after clicking on click me button the text in autocomplete is added as in the table , here is the link that works perfectly fine, var app = angular.module('app', []); app.factory('Service', function() { var typesHash = [ { id :1, name :...

Sharing $scope with cellTemplate using ui.grid

javascript,angularjs,angular-ui,angular-ui-grid
I'm using ui.grid to get a list of parts. I've created a column that contains a button which launches a modal. What I'm having trouble with is sharing the scope of the part that is contained in the row. I want to share the properties of that row with the...

Angularjs and UI-Select: how to select an option from code

angularjs,angular-ui,ui-select2,ui-select
in angularjs i have a ui-select: <ui-select ng-model="itemSelected.selected" theme="selectize" ng-disabled="disabled"> <ui-select-match placeholder="Select an item...">{{$select.selected.Name}}</ui-select-match> <ui-select-choices repeat="item in itemsList"> <span ng-bind-html="item.Name"></span> </ui-select-choices> </ui-select> How can i select an item from code when i load the page? When i load the page in the controller i get the $scope.itemsList: how can i...

How to Prefix an angular value in html?

angularjs,angularjs-directive,angular-ui
How to prefix an angular value in HTML side. In my project i am using the below line to show zip code . <span>{{activeProperty.Zip}}</span> I want that while displaying the zip, it will check whether the activeProperty.Zip length is 5 or not.if it is less then five then add leading...

Angular UI-Calendar AddEvent doesn't work when $scope.events is populated through Factory

angularjs,fullcalendar,angular-ui
As shown in this plunkr example, a new event can be added and displayed when the event is appended to $scope.events directly. However, if I update $scope.events through factory.events, the new event is not displayed on the calendar. http://plnkr.co/edit/BkdzJJ?p=preview This has to be something really simple that I'm missing, but...

Ionic, v1.0.0-beta.14 does not support ui-calendar

angularjs,angular-ui,ionic-framework
I was trying to use ui-calendar in my Ionic App . However I was getting this error , TypeError: undefined is not a function at Scope.link.scope.init (calendar.js:226) at Object.fn (calendar.js:262) at Scope.$get.Scope.$digest (ionic.bundle.js:22020) at Scope.$get.Scope.$apply (ionic.bundle.js:22282) at done (ionic.bundle.js:17439) at completeRequest (ionic.bundle.js:17629) at XMLHttpRequest.requestLoaded (ionic.bundle.js:17570) Using a previous version however...

Passing parent controller to modal (Angular-ui bootstrap)

angularjs,twitter-bootstrap,angular-ui
I feel like this should work, but it's not. I want to be able to pass the controller that is opening the modal so I can use its submit function etc. I am using the controllerAs pattern (so not using $scope). var _this = this; this.openModal = function(modalId,dataIn){ this.modalInstance =...

Angular JS - Control multiple views based on click

angularjs,angular-ui-router,angular-ui
There is my router.js $stateProvider.state("workarea", { url: "/", templateUrl: "/templates/workarea.html", requireLogin: true }).state("workarea.shared", { url: "/workarea", controller: "workareaSharedCtrl", requireLogin: true, views: { "options": { templateUrl: "/views/options.html" }, "workspace": { templateUrl: "/views/workspace.html" } } }).state("workarea.user", { url: "/:username", controller: "workareaUserCtrl", requireLogin: true, views: { "options": { templateUrl: "/views/options.html" }, "workspace": {...

Nested Grid Example - Different Columns

angularjs,angular-ui,angular-ui-grid
I am using the latest version of ui-grid ui-grid.info. What is the best way to handle nested grids with the possibility of the nested child grid having different columns then the parent row....

Nested sates and views in Angular UI Route

angularjs,angular-ui-router,angular-ui
Sorry if similar questions have been asked before but I have been strugling to get a certain setup working for a while. I took a working plunker from from an existing question and am trying to tweak it just a little to my needs. Orginal Plunker: http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW My (slightly) edited...

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....

Using ui-views and angularjs ui Tabs and invalid input

javascript,html,angularjs,uiview,angular-ui
I've recently switched markup in few of the forms to use angularJS ui Tabs component. The markups looks like this: <div class="col-lg-3 col-md-3 panel-container"> <tabset vertical="true" type="pills"> <tab heading="@Labels.general" select="selectView('general')" > </tab> <tab heading="@Labels.passes" select="selectView('guestPasses')"> </tab> <tab heading="@Labels.history" select="selectView('guestActivity')"> </tab> <tab heading="@Labels.userDefined 1"...

can we define angular dependencies in app.controller level rather then in app.module level?

angularjs,angular-ui
I'm following this example for ui.grid site: http://ui-grid.info/docs/#/tutorial/203_pinning var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']); app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) { $scope.gridOptions = {}; I'm using app.js file to define my Common dependencies using in all controllers etc. (whole app) var app = angular.module("sampleApp", ["ngResource", "ui.router", "ngTouch",...

Why isn't my ionic modal opening on an android 4.4 device?

android,cordova,webview,ionic-framework,angular-ui
I am using ionic framework with a android device (with cordova, of course). There's a modal I'm using for settings and stuff, it opens well on desktop browser with `inic serve` However, after build this, either with cordova build android or ionic build android it won't open again, not only...

How to show Sublevel Array Using table element with AngularJS

angularjs,html5,angularjs-scope,angularjs-ng-repeat,angular-ui
I am beginner in AngularJS. My Question is how to show Parent/Sub level Array Records in table format with expand/collapse functionality (child row should be displayed on expanding the parent row) with use of AngularJS. I have done the static coding and it displays all the records by default expanded...

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'); }); }); ...

Styling angular-ui-bootstrap checkbox (label)

css,twitter-bootstrap,angular-ui
I found this cool style here on stackoverflow link but I didn't know how to apply it to the chekcbox from angular-ui, well they're labels. I tried adding them as classes, the effect has changed but the active class keep on messing up everything, and they looked weird....

How to re-size (stretch start or end date) events on Angular UI Calendar?

fullcalendar,angular-ui
I haven't been able to find out whether the following options exists in Angular UI Calendar (http://angular-ui.github.io/ui-calendar/) or not. http://fullcalendar.io/docs/event_ui/eventDurationEditable/ Here is the calendar init code /* configuration */ $scope.uiConfig = { calendar:{ height: 'auto', editable: true, header:{ left: 'today prev,next', center: 'title', right: 'month basicWeek basicDay' }, eventDrop: $scope.onEventDrop,...

Global Functions in angularJS

javascript,angularjs,angularjs-scope,angular-ui
I am new to angularJS. So need help on how to add global functions in angular project? File loading my angular app is using showScrollAndGo function which should be work as global method but it is not working. Code of app.js is: 'use strict'; define( [ 'angular', 'jQuery', 'angular-route', 'angular-resource',...

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 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,...

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-grid grouping header

javascript,angularjs,angular-ui,angular-ui-grid
i am trying to make the group headers to be shown as the cellTemplate, this is the template i use: <div class="ui-grid-cell-contents"> <div ng-show="COL_FIELD"> <i class="ace-icon fa fa-check bigger-110 green"></i> </div> <div ng-hide="COL_FIELD"> <i class="ace-icon fa fa-times bigger-110 red"></i> </div> </div> and this is the columnDefs: { name:'active', width: 100,...

Angular ui - tabs controllers executed multiple times

angularjs,angular-ui-router,angular-ui
When I click on a tab, the corresponding controller gets executed 4 times. Whys that? E.g. DetailsPersonController's init function is executed 4 times. Should only be exectuted once the tab's view gets loaded. Html Tabs: <tabset> <tab ng-repeat="tab in vm.tabs()" heading="{{ tab.text | translate }}" ui-sref="p.search.details.{{ tab.id }}" active="tab.active"> <div...

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...

Add glyphicon to angular-ui alert

angularjs,bootstrap,alert,angular-ui
I'm trying to add a glyphicon to a default Angular-UI Bootstrap style alert. I'm playing with the Plunker here: http://plnkr.co/edit/KeI1gGqa46d3lptIcoF9?p=preview Here is what I'm trying to achieve: <div class="alert alert-warning"> <span class="glyphicon glyphicon-exclamation-sign"></span> <span>What I want!</span> </div> How can I have the image and the message on one line? Resolution...

angular-ui datepicker max-date doesn't work properly

javascript,angularjs,datepicker,angular-ui
I am trying to get the min-date and max-date to be set from the datepicker-options, but have been unsuccessful. A code snippet is attached. Any help? Thanks! angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { $scope.today = function() { $scope.dt = new Date(); }; $scope.today(); $scope.dateOptions = { formatYear: 'yy', minDate: '05/01/2015',...

Angular UI-Router - ng-init equivalent?

angularjs,angular-ui-router,angular-ui
I am starting to shift controller syntax in my router code, as in the following: url: '/myRoute', config: { templateUrl: 'app/my.html', controller: 'MyController', controllerAs: 'vm', title: 'avengers' } However one thing I can not find to replace is the ng-init function, often I require a function on init to be...

Dynamically adding ng-pattern, missing validation classes

javascript,asp.net-mvc,angularjs,angularjs-directive,angular-ui
I'm trying to dynamically add and remove, from a directive, the "ng-pattern" attribute. Here's my directive: ap.directive('myDirective', ['$compile', function ($compile) { return { scope: { test: "=myDirective" }, link: function ($scope, element, attrs) { $scope.$watch('test', function () { if (someCondition) { element.removeAttr("ng-pattern"); } else { element.attr("ng-pattern", "/^([0-9]{5})$|^([0-9]{9})$/"); } }); }...

Angular ui-router : Links are not clickable

javascript,angularjs,routing,angular-ui-router,angular-ui
I try to run angular-ui-router to handle my views but i have a problem. The two links of the following view are not clickable. Angular change variable with link label but i can't click on. I have this view : <!DOCTYPE html> <html ng-app="MyApp"> <head> <meta charset="utf-8"> </head> <body> <h1>App</h1>...

UI-Router don't route with param

angularjs,angular-ui-router,angular-ui
I use UI-Router. I have a first controller vehicuels.controller.js: 'use strict'; angular.module('autoPrivilegeApp') .controller('VehiculesCtrl', function ($scope,$http, $state) { $scope.awesomeThings = []; $http.get('/api/cars').success(function (awesomeThings) { $scope.message = awesomeThings; }); // Show Car detail $scope.showCarDetail = function (_id) { $state.go('vehiculeDetail', {id: _id}); }; }); vehicules.js: 'use strict'; angular.module('autoPrivilegeApp') .config(function ($stateProvider) { $stateProvider .state('vehicules',...

issue with angularjs ui tree filtering at child level

angularjs,angular-ui,angularjs-filter,angular-ui-tree,angularjs-ui-utils
Angularjs UI tree filtering feature is not working at child level however it is working fine at group level. For example if we type node1 or node2 filtering works fine, but if we type node1.2 or node2.1, filtering won't work properly. Please find plnkr If I add the following code...

Data binding between radio button and other elements not working as expected

angularjs,angularjs-ng-repeat,angular-ui
I have following JSON with answers: And i want to submit this to database only one of the answer can have "IS_CORRECT" flag with value "Y: "Answers": [ { "ANSWER_ID": 5, "DESCRIPTION": "Answer 3", "IS_CORRECT": "N" }, { "ANSWER_ID": 4, "DESCRIPTION": "Answer 2", "IS_CORRECT": N }, { "ANSWER_ID": 3, "DESCRIPTION":...

Angularjs sorting using orderBy is not working for me

javascript,angularjs,sorting,angularjs-ng-repeat,angular-ui
I am trying to sort my home list based on ratings, pricing and total counts. Unfortunately not working for me, I am new in angularjs. Here I have my html code. Actually it is sorting the things but not in order. ->When user clicks on price btn he should get...

ui-router $stateProvider.state.controller don't work

angularjs,angular-ui-router,angular-ui,ng-controller
The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working. index.html <html class="no-js" ng-app="mainApp" ng-controller="MainCtrl"> <head> .... </head> <body class="home-page">...

Use a modal ng-controller as a regular controller

javascript,angularjs,twitter-bootstrap,angular-ui,angular-ui-bootstrap
I have a controller used by a modal view (with angularui). At some point I would like to use this controller with a custom view (not a modal one). So everything is fine except for the resolve variables (variables sent to the controller). I call the modal like this: var...

How to get data from http request in angular ui bootstrap model

angularjs,twitter-bootstrap,angularjs-scope,angular-ui
I am trying to get data from http request inside angular ui bootstrap modal here is my modal code $scope.open = function (size, id) { $scope.hallName=[]; var modalInstance = $modal.open({ templateUrl: 'video_gallery.html', controller: HomeCtrl1, size: size, resolve:{ hallId:function(){ $http({ url:"../home/get_hall_name/"+id, method: "POST" }).success(function (data) { $scope.hallName=data.hall_name; alert($scope.hallName); }).error(function(){ console.log("Something went...

With Angular js's promise defer implementation do we need WEB API's to be async?

angularjs,async-await,angular-ui,web-api,asp.net-web-api2
Angular JS supports Promise Defer functionality which is asynchronous. If I have async support on the client side, do I still need to expose async methods via WEB-API?

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...

Angular development and using services into run app

angularjs,angular-ui,interceptor,angular-services
I was wondering if anyone could help me understand why i can't get my code works. I have put a session check in the run method from my main module, everything for the checking part works well but for some reasons when i try to launch the modal to reconnect...

Issue with Popover AngularJS

angularjs,tooltip,angular-ui,popover
I have a bunch of table rows which include inputs and buttons, namely. I would like to have a Popover display to the right of an input for a row if the value isn't matching the requirements defined. The button will also be disabled until the value of the input...

Close angular bootstrap modal window from a controller

angularjs,angularjs-directive,angular-ui,bootstrap-modal,meanjs
I have a contact form inside my modal window. After successful post request i want to close the modal automatically. I am using MEAN.JS here is my controller angular.module('core').controller('FormCtrl',['$scope','$http', function($scope,$http) { $scope.postMail = function (data) { $http.post('/mail', data). success(function(data, status, headers, config) { alert('success'); //close function....?? }). error(function(data, status, headers,...

Use stateProvider views in all modules

angularjs,angular-ui-router,angular-ui
I want to use a stateprovider view template in all modules.. so, in index.html i have this: <div ui-view="nav"></div> <div ui-view></div> <div ui-view="footer"></div> then my config is this: $urlRouterProvider.otherwise('/'); $stateProvider. state("home", { url: "/", views: { "": { templateUrl: "main.html" }, "nav": { templateUrl: "modules/nav/nav.html" }, "footer": { templateUrl: "modules/footer/footer.html"...

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...