TabHeading and angular tab service

[h6784rfg6]

Hi,

I tried to alter your library to fit my needs. I added some icons to your template and wanted to get shown them if the corresponding value of the tab attribute is true (for example inEditMode). I have got some tab service, which manages all tabs and their values:

<tab ng-repeat="tab in tabService.tabs()" class="content-tab" active="tab.active" data-tabScrollInEditMode="tab.inEditMode" disabled="tab.disabled">
   <tab-heading>
      <i ng-if="tab.inEditMode" class="fa fa-pencil-square-o"></i>{{tab.heading}}
   </tab-heading>
</tab>

But somehow I cannot reach the value of the tab. I tried to add new attribute on the tab and append it to dropdownTabs, like this

var inEditMode = tab.attributes['data-tabScrollInEditMode'].value;
tabScope.inEditMode = inEditMode;

But I couldn't realy get the value of this variable, I only got the text value of the data-tabScrollInEditMode attribute, which is "tab.InEditMode" and not a boolean value.

Can you give me some advice?

[Shemesh]

hi,
sorry, i don't understand your goal...
does it work for you with tabset only, without wrapping it with the scroll?
where do you want to show those icons?

[h6784rfg6]

Let us say I've got the following tab-set:
(Please see the index.html for the markup)
http://plnkr.co/edit/FnCD9pKLHBBVuV1LUdHD?p=preview

What I want to do, is to show the tab headers completelly (as they are shown in the tabset) when I open the drop down list. Now it is so, that in the drop down list there are only the names of the tabs. I want to additionally display clickable icons (like close, refresh, toggleFavourite and so on) depending on the tab data comming from some angular service.

For fetching the tabs data I use a tabService, so I whould like to know, if there is any possibility to create such a funcitonality.

P.S. If you will need a working plunker (with tab service) please tell me, I will update the mentioned one to fit your needs.

[Shemesh]

currently, the tooltip and drop-down are showing plain text, they are not intended to show html, their intention is to reflect the text from the tab header.
but you are talking about something more complex - you want to pass to the drop-down items, the text and some elements and some action on each element?

seems similar to issue #32

[h6784rfg6]

That is exactly what I mean. I need to show some html in the data-tabScrollHeading. For me it is rather importaint issue, because, if I image, that a user is willing to close some tab, if there is no close icon near the tab heading in the drop down, he will be first forced to navigate to the tab and than manually click on the close button. More challanging can be the issue, if there is some tab with inEditMode=true and he will be forced to scroll all tabs to find the tab which is in inEdtiMode. Could you image to put such functionality into you library or please give me some advices how I could adapt your library to acheave this functionality.

[h6784rfg6]

I think not only me miss such possibility and so far your library is the only one correctly working app for making some scrollable bootstrap tabs.

[Shemesh]

this issue is duplicate of issue #32. closing.