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>
Related
Hello I have created a system of tabs composed of 3 tabs.
From one of them I access a form, which is encunentra on another page and I need to press the return button to take me back to the correct tab but I can't figure it out.
Code URL list.html
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="tab1">
</md-tab>
<md-tab label="tab2">
</md-tab>
<md-tab label="tab3">
</md-tab>
</md-tabs>
Code form.HML
<md-button ng-click="return()" class="md-raised">
Cancelar
<md-icon style="color: white;">restore_page</md-icon>
</md-button>
Code .js
$scope.returnIdea = function(){;
window.location.back();
}
Window.location.back Takes me to the first tab but I want to go to the right tab
You can use md-selected in md-tabs to change the selected tab, you just need to pass the index, for yours it's 0,1 and 2: https://material.angularjs.org/latest/api/directive/mdTabs
md-selected (integer) Index of the active/selected tab
<md-tabs md-selected="tabIndex" md-dynamic-height="" md-border-bottom="">
<md-tab label="tab1">
</md-tab>
<md-tab label="tab2">
</md-tab>
<md-tab label="tab3">
</md-tab>
</md-tabs>
<md-button ng-click="back()" class="md-raised">
Cancel
<md-icon style="color: white;">restore_page</md-icon>
</md-button>
you can now create the back function by decrementing the index of the tab selected:
$scope.tabIndex = 0;
$scope.back = function() {
if ($scope.tabIndex > 0) {
$scope.tabIndex--;
}
}
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
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
I'm using angular material tabs but there is something wrong with my implementation and it gives me this result (on Chrome and Firefox):
As you can see the tab titles are truncated.
Here is my implementation:
HTML:
<md-tabs>
<md-tab ng-repeat="tab in tabs">
<md-tab-label>{{tab.titre}}</md-tab-label>
<div class="md-tabs-content">
content tab
</div>
</md-tab>
</md-tabs>
JS:
var tabs = [];
for(i=0;i<3; i++){
tabs.push({
titre: 'title'
});
}
$scope.tabs = tabs;
$scope.selectedTab = 0;
Added the plnkr:
http://plnkr.co/edit/nFMFmaGpLUwJPxRd1TpT?p=preview
Quoting from Angularmaterial docs for md-tab
Please note that if you use <md-tab-label>, your content MUST be wrapped in the <md-tab-body> tag. This is to define a clear separation between the tab content and the tab label.
So can you trying changing your code to:
<md-tabs>
<md-tab ng-repeat="tab in tabs">
<md-tab-label>{{tab.titre}}</md-tab-label>
<md-tab-body class="md-padding">
content tab
</md-tab-body>
</md-tab>
</md-tabs>