Angular-Ui Bootstrap TabSet running on-select - angularjs

I'm using Angular-Ui Bootstrap Tabset for AngularJS. I have 8 different tabs and all of them run a function when clicked. The activated tab is defined on the controller based on the object properties. The code is like this:
<tabset ng-if="paginaPronta">
<tab heading="Histórico" active="activeTabs.historico" disabled="beforeNew" select="tabHistorico('html')">
<div ng-include="includes.historico" class="row padding0"></div>
</tab>
<tab heading="Pedido" active="activeTabs.pedido" select="tabPedido('html')">
<div ng-include="includes.pedido" class="row padding0"></div>
</tab>
<tab heading="Documentos" active="activeTabs.documentos" disabled="beforeNew" select="tabDocumentos('html')">
<div ng-include="includes.documentos" class="row padding0"></div>
</tab>
<tab heading="Posse" active="activeTabs.posse" disabled="beforeNew" select="tabPosse('html')">
<div ng-include="includes.posse"></div>
</tab>
<tab heading="Despesas" active="activeTabs.despesas" disabled="beforeNew" select="tabDespesas('html')">
<div ng-include="includes.despesas" class="row padding0"></div>
</tab>
<tab heading="Faturação" active="activeTabs.faturacao" select="tabFaturacao('html')">
<div ng-include="includes.faturacao" class="row padding0"></div>
</tab>
<tab heading="Anexos" select="tabAnexos('html')">
<div ng-include="includes.anexos" class="row padding0"></div>
</tab>
<tab heading="Relatório" active="activeTabs.relatorio" disabled="beforeNew" select="tabRelatorio('html')">
<div ng-include="includes.relatorio"></div>
</tab>
</tabset>
Everything works fine at beginning but, when I change the location to navigate to another page, all 8 tab functions are called (tabHistorico(), tabPedido(), tabPosse()...)
I'm not calling the functions in any other place, I put the 'html' in every function and them made a console.log('tabHistorico: ' + phrase) on the controller and it gets printted tabHistorico: html. So, I know that all tabs are activated, I can't figure out why...

Related

alter ng-repeat order of graph presentation

I need to alter my graphs disposal and I have this
{"Modem_Signal_lte0":{"data":[["2017-08-03T07:55:35.000Z",53.1],["2017-08-03T08:00:35.000Z",52.58],["2017-08-03T08:05:35.000Z",52.83],["2017-08-03T08:10:35.000Z",53],["2017-08-03T08:15:35.000Z",53],["2017-08-03T08:20:35.000Z",53],["2017-08-03T08:25:35.000Z",53],["2017-08-03T08:30:35.000Z",54.42],["2017-08-03T08:35:35.000Z",53.05],["2017-08-03T08:40:35.000Z",54.78],["2017-08-03T08:45:35.000Z",55.43],["2017-08-03T08:50:35.000Z",58.55]],"options":{"labels":["Date","rssi"],"showRangeSelector":true,"legend":"always","ylabel":"dBm","title":"Modem Signal","axes":{"y":{}},"width":{}}},"Modem_Roaming_lte0":{"data":[["2017-08-03T07:56:45.000Z",0],["2017-08-03T08:01:45.000Z",0],["2017-08-03T08:06:45.000Z",0],["2017-08-03T08:11:45.000Z",0],["2017-08-03T08:16:45.000Z",0],["2017-08-03T08:21:45.000Z",0],["2017-08-03T08:26:45.000Z",0],["2017-08-03T08:31:45.000Z",0],["2017-08-03T08:36:45.000Z",0],["2017-08-03T08:41:45.000Z",0],["2017-08-03T08:46:45.000Z",0],["2017-08-03T08:51:45.000Z",0]],"options":{"labels":["Date","roaming"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Modem Roaming","axes":{"y":{}},"width":{}}},"Modem_Activity_lte0":{"data":[["2017-08-03T07:55:35.000Z",1],["2017-08-03T08:00:35.000Z",1],["2017-08-03T08:05:35.000Z",1],["2017-08-03T08:10:35.000Z",1],["2017-08-03T08:15:35.000Z",0.98],["2017-08-03T08:20:35.000Z",1],["2017-08-03T08:25:35.000Z",1],["2017-08-03T08:30:35.000Z",1],["2017-08-03T08:35:35.000Z",1],["2017-08-03T08:40:35.000Z",0.98],["2017-08-03T08:45:35.000Z",1],["2017-08-03T08:50:35.000Z",0.98]],"options":{"labels":["Date","state"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Modem Activity","axes":{"y":{}},"width":{}}},"Modem_Mode_lte0":{"data":[["2017-08-03T07:55:35.000Z",6],["2017-08-03T08:00:35.000Z",6],["2017-08-03T08:05:35.000Z",6],["2017-08-03T08:10:35.000Z",6],["2017-08-03T08:15:35.000Z",6],["2017-08-03T08:20:35.000Z",6],["2017-08-03T08:25:35.000Z",6],["2017-08-03T08:30:35.000Z",6],["2017-08-03T08:35:35.000Z",6],["2017-08-03T08:40:35.000Z",6],["2017-08-03T08:45:35.000Z",6],["2017-08-03T08:50:35.000Z",6]],"options":{"labels":["Date","Sysmode"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Modem Mode","axes":{"y":{"includeZero":true}},"width":{}}}}
And then it presents four graphs "Modem Activity", "Modem Mode", "Modem Roaming" and "Modem Signal".
I need to switch the graph "Modem Roaming" with "Modem Signal".
How to do this?
My view:
<tab heading="Modems" select="changeTab()" disable="!tabClick" active="activeTab.modem">
<div class="no-data" ng-if="activeNoData.modem">
<img src="/assets/img/nodata.png"/>
<h3>No Data</h3>
</div>
<tabset class="box-tab box-tab-sub">
<tab ng-repeat="type in dataGraph.modem.types" heading="{{type.label}}" select="changeSubTab(type.type)" disable="!tabClick">
<p>{{dataGraph.modem[type.type]}}</p>
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataGraph.modem[type.type]">
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="graph.options">
<dygraph options='graph.options' data="graph.data"></dygraph><br>
</div>
</div>
</tab>
</tabset>
</tab>

The sequence of key in an object is not guaranteed. You need to reorganize them into array if you care about the sequence.
var data = // data here
var dataArr = [];
dataArr.push(data.Modem_Activity_lte0);
dataArr.push(data.Modem_Mode_lte0);
dataArr.push(data.Modem_Roaming_lte0);
dataArr.push(data.Modem_Signal_lte0);

Set ng-model value on <tabset> <tab> when active

Is it possible to set a $scope value on a tab when its active?
Example: 3 tabs with ng-model="tabID" on each. Then {{tabID}} would be either 1,2,3,4 depending on what tab is active.

Put ng-click inside tab:
<tabset>
<tab ng-model="tabID" ng-click="activate(1)">
<tab-heading><i class="fa fa-bell"></i> First tab</tab-heading>
<tab-content>
fixed tab content
</tab-content>
</tab>
<tab ng-model="tabID" ng-click="activate(2)">
<tab-heading><i class="fa fa-bell"></i> Second tab</tab-heading>
<tab-content>
Content
</tab-content>
</tab>
<tab ng-model="tabID" ng-click="activate(3)">
<tab-heading><i class="fa fa-bell"></i> Third Tab</tab-heading>
<tab-content>
content
</tab-content>
</tab>
</tabset>
In your javascript (controller):
$scope.activate=function(i)
{
$scope.tabID=i;
}

You can have one variable which stores which tab is selected and onclick change the tab value
$scope.changeTab=function(index)
{
$scope.selectedtabID=index;
}

AngularJS Bootstrap-ui tabs to pull in dynamic content

I have set up a Plunker here to demonstrate my app:
http://plnkr.co/edit/iIJVuIxspDRedN7ZXiTK?p=preview
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="getContent()" active="tab.active" disabled="tab.disabled">
<div ng-hide="!tabs.isLoaded">
<h1>{{tab.title}}</h1>
<div ng-repeat="item in tabs.content">
<p>{{item}}</p>
</div>
</div>
<div ng-hide="tabs.isLoaded"><h3>Loading...</h3></div>
</tab>
</tabset>
What I would like to do is only show the relevant content under each tab, at the moment the way I have set it up is I am pulling in all content in both tabs.
What is the best way to configure this?
Thanks in advance!

Change this $scope.tabs.content=res.data;
to
$scope.tabs.content=res.data[0].fruit;
Here is updated plunker
http://plnkr.co/edit/5Ng9PHkrluKUSzQhor34?p=preview

angular ui-bootstrap on the tabs how to add href

<tabset>
<tab heading="{{nav.label}}" ng-repeat="nav in vm.data" href="{{nav.url}}">
<tabset class="subnav">
<tab ui-href="{{item.state}}" href="{{item.state}}" heading="{{item.label}}" ng-repeat="item in nav.items">
</tab>
</tabset>
</tab>
</tabset>
I want to add href, but you can not click!
I used angular-ui-bootstrap and angular-route!
What can I do?

You are making a mistake it isn't 'ui-href' but "ui-sref" and give a state name to it.
sref is for "state reference".

Nested bootstrap tabsets

I'm trying to get nested tabsets. But there's a problem - the nested tabset doesn't work because of TypeError: Cannot read property '$parent' of undefined
You can see it here:
http://plnkr.co/edit/xU9RibIL9k1D3m4GwB5z?p=preview
The html part (most important, controller is empty)
<tabset>
<tab heading="normal">
<div>Content 1</div>
</tab>
<tab heading="nested">
<div>
<tabset>
<tab heading="Nested One">
<div>Nested Content 1</div>
</tab>
<tab heading="Nested Two">
<div>Nested Content 2</div>
</tab>
</tabset>
</div>
</tab>
</tabset>
(And no, I can't use ng-view and routing - because I don't want to lost contents of tabs when switched back - routing reloads tab content)

Resources