使用Angular生成动态可点击的引导选项卡
问题描述:
我在点击动态生成的选项卡上显示时遇到问题。 下面是一个例子,他们如何像使用Angular生成动态可点击的引导选项卡
如果我在订户或设备(其是静态的选项卡)点击,视图获取切换,但是当我尝试显示动态生成的选项卡的内容(达沃尔, 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}}"
线接错,但我只是想销指出我的问题位置。我看到几个例子,开发人员构建了一些指令,但其中没有一个适用,因此我希望你们能帮助我解决问题。
预先感谢您
答
这是我的情况
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
})
答
我建议你使用UI Bootstrap。它由Angular UI主题编写,因此非常稳固。
一个示例如何使用具有角度的引导选项卡可以在这里找到:https://angular-ui.github.io/bootstrap/#/tabs。
+0
好的,我会稍后再试。 Thx建议 –
使用功能,将数据传递给控制器的解决方案。也可考虑为每个标签使用路线,以便他们可以加书签 – charlietfl