Generate dynamical clickable bootstrap tabs with Angular

Question

I'm having problems with displaying on click dynamical generated tabs. Here is an example how they look like

If i click on subscriber or devices (which are static tab), view gets switched, but when i try to display content of dynamical generated tabs (Davor, profi1, profi2, profi3), nothing happens.

This is my HTML code

<div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a ng-click="tab=1" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Subscriber</a></li>
                <li class=""><a ng-click="tab=2" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Devices</a></li>
                <!-- generating one tab for each profile --><li class="" ng-repeat="p in profiles"><a ng-click="tab={{dynamicalContent}}" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">{{p.name}}</a></li>
            </ul>
            <div class="tab-content">
                <!-- subscribers tab -->
                <div class="tab-pane active" ng-show="tab==1" ng-init="tab=1">
                    <form class="form-horizontal">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="Uid" class="col-sm-1 control-label">Uid</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="Uid"  value="{{subscriber.subscriberUid}}" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="Region" class="col-sm-1 control-label">Region</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="Region" value="{{subscriber.name}}" disabled>
                                </div>
                            </div>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                            <button type="submit" class="btn btn-info pull-left">Update</button>
                        </div><!-- /.box-footer -->
                    </form><!-- /.form -->
                </div><!-- /.tab-pane -->
                <!-- subscribers tab -->

                <!-- devices tab -->
                <div class="tab-pane active" ng-show="tab==2">
                    <div class="row">
                        <div class="col-xs-12">
                                <div class="box-body">
                                    <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                                        <div class="row">
                                            <div class="col-sm-6"></div>
                                            <div class="col-sm-6"></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                                                    <thead>
                                                        <tr role="row">
                                                            <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">Device type</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Device UID</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr role="row" class="odd" ng-repeat="row in subDevice">
                                                            <td>{{row.deviceTypeDesc}}</td>
                                                            <td>{{row.deviceUid}}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div><!-- /.box-body -->
                                </div><!-- /.box -->
                        </div><!-- /.row -->
                    </div><!-- /.tab-pane -->
                </div><!-- /.tab-content -->
                <!-- devices tab -->

                <!-- profiles tab -->
<!-- create div for each profile and link with upper tabs -->
                <div class="tab-pane active" ng-show="tab=={{dynamicalContent}}" ng-repeat="p in profiles">
                    {{p.profileUid}}
                </div><!-- /.tab-content -->
                    <!-- profiles tab -->
.... rest of the HTML

This is my controller, where i fetch all profiles of one subscriber

//Get subscriber with all profiles and devices
.controller('subscriber', ['$scope', '$routeParams', 'userEndPointService', 'adminEndPointService', function($scope, $routeParams, userEndPointService, adminEndPointService){
    var subscriberUid = $routeParams.subscriberUid;
    var myRegion= $routeParams.myRegion;
    ///...some code
    userEndPointService.method("getFilteredProfilesV2", {"profileFilter": {"regionUid": myRegion, "subscriberUid": subscriberUid}}).then(function(subscriberProfilesResponse){
        $scope.profiles = subscriberProfilesResponse;
     ///.... rest of the code
})

I know that ng-click="tab={{dynamicalContent}}" lines are wrong, but i would just like pin point my problem location. I saw few examples where developers build some directives, but non of them worked for, so i'm hoping you guy will help me with solution.

Thank you in advance

Use a function to pass data to controller. Might also consider using a route for each tab so they can be bookmarked — charlietfl
– charlietfl, Commented Nov 6, 2015 at 16:49

Stefan · Accepted Answer · 2015-11-06 15:15:12Z

1

I'd suggest you use UI Bootstrap. It is written by the Angular UI theme, so it's pretty solid.

A example how to use the bootstrap tabs with angular can be found here: https://angular-ui.github.io/bootstrap/#/tabs.

answered Nov 6, 2015 at 15:15

Stefan

15k17 gold badges92 silver badges155 bronze badges

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

Comments

Valor_ · Accepted Answer · 2015-11-10 12:23:05Z

This was the solution for my case

HTML

  <li class="" ng-repeat="p in profiles"><a ng-click="setTab(p)" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">{{p.name}}</a></li>

controller

//Get subscriber with all profiles and devices
.controller('subscriber', ['$scope', '$routeParams', 'userEndPointService', 'adminEndPointService', function($scope, $routeParams, userEndPointService, adminEndPointService){
    var subscriberUid = $routeParams.subscriberUid;
    var myRegion= $routeParams.myRegion;
    ///...some code
    userEndPointService.method("getFilteredProfilesV2", {"profileFilter": {"regionUid": myRegion, "subscriberUid": subscriberUid}}).then(function(subscriberProfilesResponse){
        $scope.profiles = subscriberProfilesResponse;
        $scope.tab = 1;
        $scope.setTab = function(p){
              $scope.tab = p.profileUid;
        }

     ///.... rest of the code
})

Collectives™ on Stack Overflow

Generate dynamical clickable bootstrap tabs with Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related