I'm trying to use the md-date-locale directive to overwrite angular material options for one date-picker input (as specified in https://material.angularjs.org/latest/api/directive/mdDatepicker) but it's not working.
Here is an example using the angular material example to test
md-date-locale="{ firstDayOfWeek: 2 }"
http://codepen.io/Hyperalpha/pen/gmwMdm
If it's not possible, I need to update datepicker options after loading (not in module.config() ).
Thanks
You need to set firstDayOfWeek in config function then its working fine
myAppModule.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.firstDayOfWeek = 2;
});
Working codepen
Related
I use the Bootstrap Select Plugin to create an extended select with input field and multiple selectable options. I use it in an Angular 1.5.3 application set up with ui-router. It does not work in the view where I need it. The code I include in that view:
<select name="jobdomainTeamId"
class="form-control selectpicker"
data-live-search="true"
multiple=""
style="display: none;"
ng-model="data.detailView.jobDomain.teams"
ng-options="team.id as team.displayName for team in data.detailView.teams"
>
<option value="">No selection</option>
</select>
The attributes 'selectpicker' and 'data-live-search' should trigger Bootstrap to dynamically create a node that provides the extra functionality. But nothing happens when I add this to the Angular view - the select is not visible (style="display: none;").
But when I add the exact same code to index.html, commenting out the ng-view
<!--<div ui-view="body"></div>-->
Here the select works - extra DOM nodes are generated and functionality is as expected.
I included all necessary stuff - Boostrap.css, bootstrap-select.css,jquery-2.1.1.,bootstrap.js and bootstrap.select.js
It occurred to me there might be a conflict between angular dependencies and Bootstrap - I include
angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm'])
Does anyone have a clue what might block Bootstrap css / js here??
Turns out that mixing JQuery + Bootstrap.js with Angular.js is asking for trouble.
Bootstrap (via JQuery) works by 'grabbing an element and modifying it'. Angular also modifies the DOM element - is an Angular directive (as well as an browser-native DOM element). What I tried to achieve is impossible this way and i ended up using an Angular library (ui-select) that does what I want.
you defined style='display:none' in your select so it's working as expected. if you want to hide it use the directive ng-hide instead, in some case you should use angular UI for specific actions
I was struggling with the same issue. This methods helped me. Hope it help someone else also
Install jquery on your angular project.
npm i --save-dev #types/jquery
import jquery to the component.
declare var $: any;
run the below code on ngOnInit
ngOnInit(): void {
$('.selectpicker').selectpicker('refresh');
}
Hi I have been using Angular ui bootstrap time picker and its working fine. But, the up and down arrow - chevron icons are missing. Its seen as shown in the screenshot. I inspeacted element and changed "icon-chevron-down" to "glyphicon glyphicon-chevron-down" and its working fine.
But, as I am using bower and dynamic html ("bootstrap-timepicker": "~0.3.0", and "bootstrap-ui-datetime-picker": "~1.2.1"), I am not sure how can I edit this and update glyphicon class?
I am sure, I need to create a custom template to override the following in my html:
From bootstrap-timepicker.js:
templateContent = '<table>'+
'<tr>'+
'<td><i class="icon-chevron-up"></i></td>'+
...
But, I am not sure what id I should be using to create my template?
I'm trying to use protractor to implement some e2e tests.
I'd like to simulate user interaction with the autocomplete typeaheaded control.
I can't find a way to select (click) one element from the autocomplete list.
Some suggestions?
I'm using AngularJSv1.3.3 and Bootstrap v3.3.0.
This worked for me:
// type into the typeahead
element(by.model('job')).sendKeys('123');
// uib-typeahead uses match in matches...
element.all(by.repeater('match in matches')).get(0).click();
I am using the sliders in the ionic framework and everything is working great. This is my html:
<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager={{showPager}}>
Pretty straightforward, notice that i am using showPager to dynamically show and hide the pager.
And in the controller:
$scope.showPager = true
$scope.slideHasChanged = ($index) ->
if $index == 4
$scope.$apply ->
$scope.showPager = false
It does as expected sets showPager value to false when the index of the slide is 4 in the web console.
BUT it does not really hide it on the web page. IF i explicitly set showPager to false, it does not display in the browser as expected, but if i try the above stuff to dynamically hide it, it does not work.
What am i missing?
<ion-slide-box> directive does not observe show-pager attribute. So it will consider only the value which was at the time of directive initialization.
For your use-case, you can show/hide pager by putting ng-class directive on <ion-slide-box> directive and based on that class you can write css to show/hide the pager.
Check this example codepen for working example.
Anyone managed to integrated supersize with angular js?
I tried creating a directive and placing the following code inside a directive
$.supersized({
//params :
supersize did work in creating the
<ul id=supersized" .... >
However my screen isn't displaying supersize's full screen slideshow. Any idea why?