Question

我有一个bootstrap ui tab angularjs指令，默认情况下将第一个选项卡设置为活动选项卡。这里的问题是，如果您在选项卡中，而不是第一个选项卡，并尝试刷新页面，因为默认活动类位于第一个选项卡上，在刷新时它会将第一个选项卡显示为活动状态。但是，显示的内容将来自正确的选项卡。 Bootstrap指令：

var configDirectives = angular.module('configDirectives', []);

configDirectives.directive('configTabs', function(){
  return{
  restrict:'A',
  template: '\
  <ul class="nav nav-tabs">\
    <li class="active"><a href="#categories" data-    toggle="tab">categories</a></li>\
<li><a href="#uploadassets" data-toggle="tab">upload assets</a></li>\
<li><a href="#" data-toggle="tab">lorem ipsum</a></li>\
  </ul>'
}});

我的问题是：我们可以动态设置这个活动类，而不是在第一个li元素中对其进行硬编码吗？

Answer 1

将ng-class与自定义变量一起使用：

ng-class="{'active' : selectedType == 'categories'}"

然后单击以选择活动标签（在您的href或div或其他内容中）：

ng-click="selectedTab = 'categories'"

将'selectedType'添加到指令范围

范围：{ selectedType：'=' }

如何将活动类应用于bootstrap Tab ui

1 个答案: