在 <tabset> <tab> 激活时设置 ng-model 值

Question

是否可以在选项卡处于活动状态时在其上设置 $scope 值？

示例：3 个选项卡，每个选项卡上都有 ng-model="tabID"。然后 {{tabID}} 将是 1,2,3,4 取决于哪个选项卡处于活动状态。

Answer 1

您可以有一个变量来存储选择了哪个选项卡，然后单击更改选项卡值

$scope.changeTab=function(index)
    {
        $scope.selectedtabID=index;

    }

Answer 2

将 ng-click 放在选项卡内：

<tabset>
   <tab ng-model="tabID" ng-click="activate(1)">
      <tab-heading><i class="fa fa-bell"></i> First tab</tab-heading>
      <tab-content> 
         fixed tab content 
      </tab-content>
   </tab>
   <tab ng-model="tabID" ng-click="activate(2)">
      <tab-heading><i class="fa fa-bell"></i> Second tab</tab-heading>
      <tab-content> 
         Content 
      </tab-content>
   </tab>
   <tab ng-model="tabID" ng-click="activate(3)">
      <tab-heading><i class="fa fa-bell"></i> Third Tab</tab-heading>
      <tab-content> 
         content 
      </tab-content>
   </tab>
</tabset>

在您的 javascript（控制器）中：

$scope.activate=function(i)
    {
        $scope.tabID=i;
    }

在 <tabset> <tab> 激活时设置 ng-model 值

Set ng-model value on <tabset> <tab> when active

angularjs

angular-ui-bootstrap