I am trying to make wizard using md tab.How can i make the conditional move of the tab?.Ex- I want to call a service on tab change, tab should be change only when we get the success response. I have user md-on-deselect attr for that but tab moves before getting the response.
<md-tab label="1. Details" md-on-deselect="CampaignCtl.test()">
<md-content class="tabsContent">
<div data-ng-include=" 'app/view/advertiser/campaigns/campaigns-detail.html'"></div>
</md-content>
</md-tab>
<md-tab label="2. Advertisement Media" md-on-deselect="CampaignCtl.test()">
<md-content class="tabsContent">
<div data-ng-include=" 'app/view/advertiser/campaigns/campain-advertiser-media.html'"></div>
</md-content>
</md-tab>
I am trying to call a service from test method
Related
I'm using following HTML structure in parent.html page (and have corresponding Controller for this parent HTML Page)
<md-tabs md-dynamic-height class="report-tabs" layout-align="center stretch" md-no-pagination="true">
<md-tab>
<md-tab-label>
<span class="tab-label">Tab 1</span>
</md-tab-label>
<md-tab-body>
<div ng-include="tab1-page-URL"></div>
</md-tab-body>
</md-tab>
<md-tab>
<md-tab-label>
<span class="tab-label">Tab 2</span>
</md-tab-label>
<md-tab-body>
<div ng-include="tab2-page-URL"></div>
</md-tab-body>
</md-tab>
Currently when I load this parent.html page, All contents of all tabs are getting loaded at beginning.
Don't we have lazy loading where contents of tab are loaded when it's active (when selected/clicked upon) ?
If we don't have such provision, How can I call function of child tab's controller, when particular tab is selected ? Currently all functions of all child tab's controllers are getting called - which is time consuming and not needed where user will see first tab only when page completes compiling and rendering ?
I've tried calling Child-tab controller functions on parent.html page, but unless all md-tab contents are not loaded, nothing from child-controller is accessible. Only accessible part in this page will be parent.html's own controller functions.
Let me know if any other way I can proceed, Or am I missing completely something here ? Thank you.
From the official doc, for using md-tab , there are no lazy loading contents.
If we don't have such provision, How can I call function of child
tab's controller, when particular tab is selected ? Currently all
functions of all child tab's controllers are getting called - which is
time consuming and not needed where user will see first tab only when
page completes compiling and rendering ?
My method is by using the button only tabs, then using dynamic ng-include, and setting the reladed view during selecting the tab, by md-on-select
something like:
<md-tabs>
<md-tab label="Tab #1" md-on-select="onTabSelected(1)"></md-tab>
<md-tab label="Tab #2" md-on-select="onTabSelected(2)"></md-tab>
<md-tab label="Tab #3" md-on-select="onTabSelected(3)"></md-tab>
</md-tabs>
<md-content class="md-padding">
<ng-include src="'templates/tabs/'+ tabId +'.html'"></ng-include>
</md-content>
controller :
$scope.tabId = 1; //default template loaded
$scope.onTabSelected = function(tabId) {
//you can add some loading before rendering
$scope.tabId = tabId;
};
templates directory:
templates/
tabs/
1.html
2.html
3.html
You could try something like:
<md-tabs md-dynamic-height class="report-tabs" layout-align="center stretch" md-no-pagination="true">
<md-tab md-on-select="onSelect(tab)" ng-repeat="tab in tabs">
<md-tab-label>
<span class="{{tab.class}}">{{tab.label}}</span>
</md-tab-label>
<md-tab-body>
<div ng-if="selectedTab === tab.id" ng-include="{{tab.url}}"></div>
</md-tab-body>
</md-tab>
and in controller:
$scope.tabs = [
{id: 1, label: "label for tab 1", url: "url-tab-1.html"},
{id: 2, label: "label for tab 2", url: "url-tab-2.html"}
];
$scope.onSelect = function(tab) {
$scope.selectedTab = tab.id;
};
$scope.onSelect(1);
I am having API response which displays the data and set the index, but after next API call the selectedIndex doesnot get updated in view(gets updated in controller)
<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex">
<md-tab label="{{values.name}}" id="{{$index}}" ng-repeat="values in array_list">
</md-tab>
</md-tabs>
I'm new to angular material and my question is how i can show different html file for each md-tab. for example, i have 3 tabs: the first for catalog.html, the second for manage.html and the third for orders.html.
Thanks!
EDIT 1:
so i did this:
<md-tabs >
<md-tab label="Product catalog">
<div ng-include src="#"></div>
</md-tab>
<md-tab label="Workers management">
<div ng-include src="employeesPage.html"></div>
</md-tab>
</md-tabs>
inside index.html, but nothing is shown...
<md-tab label="Catalog">
<div ng-include src="'catalog.html'"></div>
</md-tab>
I am trying to implement tabs in AngularJS using Angular Material.
I have some tabs. On clicking over a tab, the content specific to that tab should be displayed. But the problem I am facing is that, the content of that tab doesn't occupy the full device length.
<md-tabs md-selected="selectedIndex">
<md-tab md-on-select="onTabSelected(tab)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled">
<md-tab-label>
<p>Tab A</p>
</md-tab-label>
<md-tab-body>
<p>Content of tab A</p>
<div infinite-scroll="loadMore(tab.id)" infinite-scroll-disabled="busy">
<div ng-repeat="p in products">
<div class="well">
<h3>{{p.id}}</h3>
<h5>{{p.cat_id}}</h5>
</div>
</div>
<div ng-show="busy">Loading more products....</div>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
"md-tab-body" directive specifies the tab content.
In the above code, I just intend to implement ng-Infinite scroll as a part of tab content. But somehow, tab content occupies only a part of the page length.
Is there any solution by which I can make the tab content occupy full length of the page.
I am not sure if there are any other solutions for this problem, but the simplest one is to use md-dynamic-height attribute on md-tabs directive.
<md-tabs md-dynamic-height>
.....
</md-tabs>
This is all that you need!
There is a strange behavior on the graph when I open dialog and click on the next tab. The axis just disappear :/
I've defined graphs separately in two controllers and bind to the md-tabs:
<div class="md-padding" id="popupContainer" ng-cloak>
<md-content>
<md-tabs md-dynamic-height md-selected="selectedIndex">
<md-tab label="Tab 1" aria-controls="Tab 1"><span flex=""></span>
<div class="panel-body" ng-controller="GraphCtrl" ng-cloak>
<svg id="chart1" width="450" height="300"></svg>
</div>
</md-tab>
<md-tab label="Tab2" aria-controls="Tab 2"><span flex=""></span>
<div class="panel-body" ng-controller="Graph2Ctrl" ng-cloak>
<svg id="chart2" width="450" height="300"></svg>
</div>
</md-tab>
</md-tabs>
</md-content>
</div>
Please take a look at the plunker what is going on.
You will need to call the resize on tab select(why i think this is the issue, because if you resize your browser you will see the x/y scales come back!)
Something like this on tab select of Tab 1
$scope.chart_grid_lines.resize()//in reference to your plunk above
Something like this on tab select of tab 2
$scope.chart.resize()//in reference to your plunk above