angularJs1.x 版本中 uib-tabset 如何默认激活不同的标签页

时间:2021-07-26 19:38:02

 <uib-tabset> 默认有个active属性,根据官方文档,active的默认值是0,也就是说,默认显示索引为0的标签页,可以通过修改这个值来默认显示不同的索引的标签页。

示例:

<uib-tabset>
  <uib-tab>第一个标签页内容,索引是0</uib-tab> //默认显示
  
<uib-tab>第二个标签页内容,索引是1</uib-tab>
  <uib-tab>第三个标签页内容,索引是2</uib-tab>
</uib-tabset>
<uib-tabset active="0">
  <uib-tab>第一个标签页内容,索引是0</uib-tab> //默认显示
  
<uib-tab>第二个标签页内容,索引是1</uib-tab>
  <uib-tab>第三个标签页内容,索引是2</uib-tab>
</uib-tabset>
<uib-tabset active="1">
  <uib-tab>第一个标签页内容,索引是0</uib-tab>
  <uib-tab>第二个标签页内容,索引是1</uib-tab> //默认显示
  
<uib-tab>第三个标签页内容,索引是2</uib-tab>
</uib-tabset>
//超出索引,默认不现实任何标签页
<uib-tabset active="10">
  <uib-tab>第一个标签页内容,索引是0</uib-tab>
  <uib-tab>第二个标签页内容,索引是1</uib-tab>
  <uib-tab>第三个标签页内容,索引是2</uib-tab>
</uib-tabset>
<uib-tabset active="">
  <uib-tab>第一个标签页内容,索引是0</uib-tab> //默认显示
  
<uib-tab>第二个标签页内容,索引是1</uib-tab>
  <uib-tab>第三个标签页内容,索引是2</uib-tab>
</uib-tabset>
<uib-tabset active="无规则字符">
  <uib-tab>第一个标签页内容,索引是0</uib-tab> //默认显示
  
<uib-tab>第二个标签页内容,索引是1</uib-tab>
  <uib-tab>第三个标签页内容,索引是2</uib-tab>
</uib-tabset>

注:以上示例亲测有效。

如何绑定Typescript文件中的变量?

active="变量名"

例子:

<uib-tabset active="myIndex">
  <uib-tab>第一个标签页内容,索引是0</uib-tab>
  <uib-tab>第二个标签页内容,索引是1</uib-tab>
  <uib-tab>第三个标签页内容,索引是2</uib-tab>
</uib-tabset>
var myNum=0;

//...逻辑代码....
//
...逻辑代码....

if(myNum>2){
$scope.myIndex
=1
}
else{
$scope.myIndex
=0;
}