Angular-slider on a modal window - angularjs

I'm trying to get the angular-slider (http://prajwalkman.github.io/angular-slider/) to work on a angularjs twitter bootstrap model dialogue. It works fine on the page, but I cant get it to work on the modal window. Any thoughts? I'm just learing angularjs...
Here is my code:
http://plnkr.co/edit/gBbReA65qoXsXsC0H3Ft?p=preview
Thanks, Ryan

Looks like that's a known bug. It's logged here: https://github.com/prajwalkman/angular-slider/issues/36
If you don't want to wait on them fixing it (looks like their last commit was 4 months ago...) you can look at the slider provided by angular-ui: https://github.com/angular-ui/ui-slider
Or here's an example of writing your own: http://ngokevin.com/blog/angularslider/

I created a new slider that allows for multiple sliders and has the capability to be used in a modal window.
https://github.com/enkodellc/angular-multi-slider

Related

How to avoid `modal-backdrop hide` insert to ionic cache?

I encounter the problems of modal-backdrop hidekeep append in my ionic view.
I need to call modal for my code. In my case, if the students click to the button check the answer then the modal of marking status will comes out.
However, If I repeatedly answer a lot of questions, the modal-backdrop hide append everytime I click the button.
Is it anyway to clear the cache for the modal like in <ion-view cache-view="false"></ion-view>?
You need to use ionic modal remove instead of hide.. Refer this Ionic Documentation.
http://ionicframework.com/docs/api/service/$ionicModal/

Capture event when md-sidenav is toggled (using md-is-locked-open)

I'm using the Angular Material component framework.
I've defined a page with a md-sidenav called sidebar that is automatically shown (on the left of the screen) if resized to a certain width. This is possible thanks to the directive md-is-locked-open="$mdMedia('gt-sm')".
What I try to achieve seems quite straightforward: I just want to know (have an event triggered) when the sidenav is being shown / hidden (by user, or automatically). I've tried several different solutions, but nothing seem to be working.
I have a plunker that has the same behaviour as what I'm are trying to achieve. In the activate function, I try to capture the events (or what I thought would be events, doesn't seem so because it's not working).
I tried almost all the solutions that were given here and here, but no luck (specially when automatically showing / hiding the sidenav).
Any ideas here?
Thank you very much!
You could use the $mdMedia service in the controller instead of in the view. From the documentation
The media query will be re-evaluated on resize, allowing you to register a watch.
So you can register a watcher for your desired media query size, then call a function when the watcher fires:
$scope.$watch(function(){return $mdMedia('gt-sm');}, function(){
$scope.showSideNav = !$scope.showSideNav;
console.log("SideNav State Change");
});
Then I'd setup the sideNav like this:
md-is-locked-open="showSideNav"
Here is a working example, forked from your Plunker

programmatically open a bootstrap select

I need to programmatically open a bootstrap select, not show like documentation says
(it affects displaying)
It seems to be a missing method, so how can it be done?
Use the toggle method. It programmatically toggles the bootstrap-select menu open/closed.
$('.selectpicker').selectpicker('toggle');
I tried the documentation and it wasn't working for me either, so I did some research and apparently opening a select list is not an easy thing to do programatically with JavaScript.
check out this Post and this Post.
What I would probably recommend is to use a Bootstrap .btn-dropdown instead of a select list if possible?

How would you dim a container/panel like a modal Msg?

I'm trying to implement a view that requires a response from the server to update itself, so I'd like to 'dim' the container and show a spinner while it's asynchronously loading information from the server and then 'undim' when it's finished.
I've seen the same effect from the background of a Msg/Panel and would like to implement exactly the same thing with a spinner in the middle.
I think you want to use the regular extjs loadMask, let us know if you need help using it.
If you are looking for how to create a modal window in Sencha touch, then this is the best example.
http://www.sencha.com/forum/showthread.php?122382-Can-I-have-a-quot-popup-quot-panel-opened-on-clicking-a-button
You can mask the panel using loadmask configuration

using datepickerplus in ext js

i have been playing around with the ext js library for showing multi month calendar
http://www.lubber.de/extjs/datepickerplus/
one issue is in all the examples are either coming off of another control(combo, textbox) or inside a window object
does anyone know if there are any examples of simply displaying the calendars on a regular page?
If you check the source of http://www.lubber.de/extjs/datepickerplus/ around line 635 where the dWin object is being instantiated you should get an idea on how to add it to a page.
Basically this script (be warned, it has loads of commented code and actually is quite a mess) creates an Ext Window, with several items of which one has a datepickerplus xtype.
It should be possible to also render the datepicker to another dom element directly but i think that this extension to Ext doesn't support this out of the box so you should probably extend the object and override the render method.
Hope that helps

Resources