使用 Angular 生成动态可点击的 bootstrap 标签

Question

我在显示点击动态生成的标签时遇到了问题。这是他们的样子的例子

如果我单击订阅者或设备（静态选项卡），视图会切换，但是当我尝试显示动态生成的选项卡（Davor、profi1、profi2、profi3）的内容时，没有任何反应。

这是我的HTML代码

<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

这是我的控制器，我在其中获取一个订阅者的所有配置文件

//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
})

我知道 ng-click="tab={{dynamicalContent}}" 行是错误的，但我只想指出我的问题所在。我看到开发人员构建一些指令的几个示例，但没有一个有效，所以我希望你们能帮助我解决问题。

提前致谢

Answer 1

我建议您使用 UI Bootstrap。 AngularUI主题写的，所以很扎实

有关如何将 bootstrap 选项卡与 angular 一起使用的示例，请参见此处：https://angular-ui.github.io/bootstrap/#/tabs。

Answer 2

这是我的案例的解决方案

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>

控制器

//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
})

使用 Angular 生成动态可点击的 bootstrap 标签

Generate dynamical clickable bootstrap tabs with Angular

html

javascript

tabs

twitter-bootstrap

angularjs