Is there any way to know the previous active tab in tabset.
I am using ngxTabset, I need to know the previous active tab is there any way to get it
When a tab is selected you could listen to the (selectTab) output. This will give you the current tab. If you store that value into a component property like previousActiveTab you could use the value of this.previousActiveTab the next time (selectTab) is triggered.
Related
I need few suggestions/workarounds. I am having an issue on user experience of ngx-bootstrap inline datepicker.
If the user selected the date range on the same day, some user only click once. The problem is bsValueChange only emit when click twice. So when the user click the apply button on the screenshot, it applies the previous value. What i want to do is if the user did not click twice, i disable the apply button but the v5.3.0 does not have an event emitter for that situation.
Thank you
enter image description here
Hi I would suggest you add some external buttons with some predefined date ranges like in here. quick dates with buttons
Then you can just hook it to a click event and in the method you set the bsValue input to [m().subtract(0, 'days').startOf('day').toDate(), m().endOf('day').toDate()]; where m refers to momentjs.
Currently I develop a system will auto select options from list depend of user input. The issue I facing is once the selected='selected' attribute removed and use js re-add again the layout will not showing highlight even the html element is showing selected='selected'.I has been try submit the record, endpoint not getting any data from it, Any way to solve this issue ?
I am doing a signup form with a few steps, made with angular material tabs. I have 5 tabs each containing a few inputs that the user should fill in. I also have 2 buttons below the tabs, one to get to the next tab and one button to get to the previous tab. I want to disable the upcoming tabs and also disable the button that takes the user to the next tab until the user has filled in the the tab he is on properly. I want the user to be able to go back and change the information that is already filled in on the previous tabs, and when all the tabs are filled in properly a send button is shown. So, that's basic functions for a multi step signup form.
I have managed to do the basic functions for the buttons and the tabs with ng-disabled and ng-hide combined with changing the value on the variable tabNr in my controller, like hiding the previous-button on the first tab and hiding the next-button on the last tab, and that works fine.
When it comes to hide the next-button based on if the form is filled in its a bit more tricky. I am able to disable the next tab by validating the form on the previous tab like this: ng-disabled="!tab1Form.$valid", so that's hard coded and works fine.
The previous- and next-buttons, though, are the same for all tabs and that is the tricky part, so I can't just disable the button if a form isn't valid because the button does not know which tab that is active. I have tried to make a function in the controller but then the problem is that the valid-variable is just a thing in html and I cant evaluate it in the controller.. As far as I have tried and have understood.
So this is the next-button:
<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>
Each tab has this, with it's own number:
<form name="tab1Form" novalidate>
What I've tried is to change the tab, that should trigger the disable, by using angular:
ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"
The browser seems to change the number, and it works for the first tab, but on the rest of the tabs it does not disable the button even though it should, like if the browser does not evaluate the variable properly. I hoped that it should work because I cant think of another way of doing it with these variables...
Does this way of using angular simply not work or am I doing anything wrong? Does anyone have a solution I could use?
In your controller
function Controller($scope){
var vm = this;
vm.form = $scope['tab' + anyNumber + 'Form'];
}
then in your html
ng-disabled="!FormCtrl.form.$valid"
The Spark List with a mobile theme has kind of a weird behavior that I need to disable in favor of a context menu.
The default behavior of that list is that an item only loses it's selection color when another item has entered the selected state. That means that for the moment the user remains in the down state on an item (either by mouse down or tap and hold), two items show the selection color, the one that is still selected, and the current one with the down state.
What I need is that selected items lose their selection color/state as soon as another items enters the down state, so basically the selection state needs to be set as soon as the down state is entered.
Why do I need this you may ask, let me explain;
My lists need a context menu which will be opened on long press. And since long press doesn't include a mouse up event before the long press event is triggered, the item won't get selected, thus other items won't lose their selection color.
My itemRenderer is a standard LabelItemRenderer written in AS and it would be great to change this functionality in the ItemRenderer, not the parent component.
Has anyone got a clue how to accomplish this?
Since you're using the LabelItemRenderer, I assume you're building a mobile app. This is kind of a guess; but...
Can you add a Long Press event handler to the itemRenderer, and change the selected property of the itemRenderer in the event handler?
I'm not sure if such a change in the itemRenderer will also change the actual List, though. In theory it should not.
Aside from that, if your Long Press event bubbles up from the itemRenderer, you can listen to it on the List class and change the selectedItem that way, before popping up your new menu.
I am currently working on making my Flex application accessible.
I have an mx DataGrid that I am using for showing complex data. Each row contains information about a person and one of the columns contains a button to "submit" that person's information.
Currently if I tab to the DataGrid, it has focus on the whole thing, but I cannot tab to individual cells. For accessibility purposes, I need the user to be able to tab to each of these cells to read the information. Everywhere I've looked I've found that it seems the only way to focus on an individual cell is to set the editable property to true. However, I do not want to make the field editable, as that information should not be changed.
At the very least I would like to be able to tab to the cell that has the button ItemRendender for each person. I could set the rest of the information in the accessibilityName of that.
Is there any way to accomplish this? Or am I going to have to find a more "creative" solution?
In case anyone is wondering how to get around this, the only way I could find is to switch over to an AdvancedDataGrid. If you set the ADG's selectable property to true, you can use the arrow keys to select a whole row at a time, and the screen reader will read the whole row of information.
Then to get the effect of clicking the row's button, I set a keyboard event watcher that performs the function of the button using the target(ADG)'s selected item when you press space.