Angular tabs with UI-Router & UI-Bootstrap

Question

I'm new to Angular and am trying to make a tabs control that will load a state for each tab (dynamically).

My tabs code:

 <uib-tabset>
        <uib-tab index="$index + 1" ng-repeat="tab in tabData" heading="{{tab.heading}}" disable="tab.disabled">
            <a ui-sref="{{tab.route}}">Click me</a>  
        </uib-tab>
    </uib-tabset>

What I'm injecting in there:

$scope.tabData = [
 {
     heading: 'Companies',
     route: 'LandingTemplate.Company',
     disabled: false
 },
 {
     heading: 'Users',
     route: 'LandingTemplate.Users',
     disabled: false
 },
 {
     heading: 'Clients',
     route: 'LandingTemplate.Clients',
     disabled: true
 }
];

Sample route:

.state('LandingTemplate.Company',
{
    url: '/company',
    views: {
        'container@': {
            templateUrl: 'App/Views/Admin.html'
        },
        'tabs-views@': {
            templateUrl: 'App/Views/Company.html'
        }
    }
})

Currently how it's wired is you click a tab, click the link and that will render your view. I'd like to just click the tab. Any help would be appreciated.

I want my uib-tab to take me to that state, the ui-sref is in there as an example. The tab would fire off the ui-sref ideally, but there's no property on the tab syntax to do so. — RandomUs1r
– RandomUs1r, Commented Apr 24, 2017 at 20:36

Pankaj Parkar · Accepted Answer · 2017-04-24 20:19:58Z

1

You could add uib-tab-heading directive inside ui-tab, in that mention a(anchor) tag with ui-sref and keep tab content empty. This will make your tab as in anchor tag which will help you to redirect to other state.

<uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabData" disable="tab.disabled">
      <uib-tab-heading>
         <a ui-sref="{{tab.route}}">Click me</a>  
      </uib-tab-heading>
    </uib-tab>
</uib-tabset>

answered Apr 24, 2017 at 20:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pankaj Parkar Over a year ago

@RandomUs1r glad to help you, Thanks :)

RandomUs1r Over a year ago

I might've spoken too soon, it seems that embedding the link this way doesn't trigger the active event, so the link is clickable, but it doesn't cycle the active class so I can update my styling, any thoughts?

RandomUs1r Over a year ago

Unchecking this as the accepted answer, it doesn't work with the underlying technology because clicking on the link in this format doesn't change the active class on the tab.

Pankaj Parkar Over a year ago

@RandomUs1r could you please add plunker with problem in it?

RandomUs1r Over a year ago

Sure, plnkr.co/edit/NnRDHENE7atIDj7dvoQr?p=preview never made a plunkr before, so pardon the lack of advanced techniques, basically I highlighted the background on the active tab to show the issue. Click on the link, the tab changes, but the active doesn't, click on the corner and the active changes, but the tab does not.

Phung D. An · Accepted Answer · 2017-12-29 08:31:24Z

This answer is quite similar to @Pankaj Parkar

<div ng-app="demoApp" ng-controller="mainController">
<div ui-view></div>

<script type="text/ng-template" id="tabs.html">
    <uib-tabset active="active">
        <uib-tab index="$index" ng-repeat="tab in tabs" ng-click="go(tab)">
            <uib-tab-heading> <a ui-sref="{{tab.name}}">{{tab.name}}</a>  </uib-tab-heading>
            <div ui-view></div>
        </uib-tab>
    </uib-tabset>
</script>

angular.module('demoApp', ['ui.router', 'ui.bootstrap', 'ui.router.stateHelper'])
.run(['$state', '$rootScope', 'TABS_CONFIG', function($state, $rootScope, TABS_CONFIG) {
    // run needed to set the correct tab-index on load
    var tabs = TABS_CONFIG.children;
    $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {

         console.log ('$stateChangeStart')
        angular.forEach(tabs, function(item, index) {
            if (item.name == toState.name) {
                $rootScope.active = index;
                    console.log ($rootScope.active)

            }

                console.log (index)
        });
    });
}])
.constant('TABS_CONFIG', {
    name: 'tabs',
    templateUrl: 'tabs.html',
    abstract: true,
    children: [{
            url: '/about',
            name: 'about',
            template: '<div class="container"><h1>about</h1></div>'
                //templateUrl: 'about.html'
        }, {
            url: '/contact',
            name: 'contact',
            template: '<div class="container"><h1>contact</h1></div>'
                //templateUrl: 'contact.html'
        }, {
            url: '/knowhow',
            name: 'know-how',
            template: '<div class="container"><h1>knowhow</h1></div>'
                //templateUrl: 'knowhow.html'
        },

    ]
})
.controller('mainController', function($scope, $state, TABS_CONFIG) {
    $scope.tabs = TABS_CONFIG.children;

    $scope.go = function(tab) {
    console.log ('go')
        //$scope.active = $scope.tabs.indexOf(tab);
        $state.go(tab.name);
    };
})
.config(routes);

function routes($urlRouterProvider, stateHelperProvider, TABS_CONFIG) {
$urlRouterProvider.otherwise('/contact');

stateHelperProvider.state(TABS_CONFIG, {
    keepOriginalNames: true
});
}

Collectives™ on Stack Overflow

Angular tabs with UI-Router & UI-Bootstrap

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related