texas697 texas697 - 4 months ago 75
AngularJS Question

how to switch from static ui-bootstrap tabs to dynamic ui-tabs

I am trying to use ui-router for my ui-bootstrap tabs. I am following a example and it is working fine. problem is I was using static tabs in the html. The example I followed uses the dynamic tabs. I need to incorporate a ng-click function and a id tag I had in my previous setup.

here is new setup

<tabset justified="true">
<tab ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>

$scope.go = function (route) {
$state.go(route);
};

$scope.active = function (route) {
return $state.is(route);
};

$scope.tabs = [
{ heading: "Supply", route: "main.tab1", active: false },
{ heading: "Demand", route: "main.tab2", active: false },
//{ heading: "Tab 3", route: "main.tab3", active: false },
];

$scope.$on("$stateChangeSuccess", function () {
$scope.tabs.forEach(function (tab) {
tab.active = $scope.active(tab.route);
});
});


here is what i was using before

<tabset justified="true">
<tab heading="Supply" ng-click="clearPopupSupply()">
<div ng-include src="'ViewsSPA/SupplyChart.html'" style="margin-top:-25px"></div>
</tab>
<tab heading="Demand" ng-click="clearPopupDemand()" id="bootstrap-tour-position">
<div ng-include src="'ViewsSPA/DemandChart.html'" style="margin-top:-25px"></div>
</tab>
</tabset>

Answer

so ui-router has a few directives that do what you are trying to achieve, specifically ui-sref and ui-sref-active. In your html code do:

 <tabset justified="true">
     <tab ng-repeat="t in tabs"
          heading="{{t.heading}}"
          ui-sref="t.route"
          ui-sref-active="active">
     </tab>
 </tabset>

Now your angular only needs the object since ui-router has taken care of the rest

 $scope.tabs = [
    { heading: "Supply", route: "main.tab1" },
    { heading: "Demand", route: "main.tab2" }
];