使用Angular生成动态可点击的引导选项卡

Question

我在点击动态生成的选项卡上显示时遇到问题。 下面是一个例子，他们如何像

如果我在订户或设备（其是静态的选项卡）点击，视图获取切换，但是当我尝试显示动态生成的选项卡的内容（达沃尔， 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

这是我的情况

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

Answer 2

我建议你使用UI Bootstrap。它由Angular UI主题编写，因此非常稳固。

一个示例如何使用具有角度的引导选项卡可以在这里找到：https://angular-ui.github.io/bootstrap/#/tabs。