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>
Related
I have code using the following angularjs material functionality:
<md-tab md-on-select="something" label="{{subsetKey}} ({{subset.data ? subset.data.length : 0;}}) <i class='example icon class'></i>" ng-repeat="(subsetKey, subset) in dogBreeds[(dog === 0 ? 'All' : dog.BreedID)].subsetList">
I need to add an icon with this label, but it renders as text rather than the icon like:
<md-tab-item>
Labrador <i class='example icon class'></i>
</md-tab-item>
Please note, this doesn't use the structure found in the AngularJS demo below
https://material.angularjs.org/latest/demo/tabs
<md-tab id="something">
<md-tab-label>something label</md-tab-label>
<md-tab-body>something body</md-tab-body>
</md-tab>
Any help would be greatly appreciated.
I think you should change your code to something like this:
<md-tabs>
<md-tab md-on-select="something" ng-repeat="item in items">
<md-tab-label>
Labrador
<i class='example icon class'></i>
</md-tab-label>
<md-tab-body>
{{item}}
</md-tab-body>
</md-tab>
</md-tabs>
I do not know how much you need to have your code like it is right now, but changing it to something more structured would be easier for you as you can also add all the info you need!!
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'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'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!