angularjs - AngularJS UI Bootstrap 在无法使用的静态选项卡中动态选择

Question

我有三个静态标签和一个带有ng-click =“selectThirdTab()”的按钮

<div ng-controller="Ctrl">
        <input type="button" value="Select third tab" ng-click="selectThirdTab()" />
        <tabset justified="true">
            <tab heading="First" active="isFirstActive"></tab>
            <tab heading="Second" active="isSecondActive"></tab>
            <tab heading="Third" active="isThirdActive"></tab>
        </tabset>
</div>

函数“selectThirdTab”如下:

$scope.selectThirdTab = function () {
    $scope.isThirdActive = true;
}

unk子在这里: Plunker

最初选择第一个选项卡，然后单击按钮，结果是选择的第三个按钮。现在，如果您选择另一个选项卡，然后再次单击按钮“选择第三个选项卡”，则不会选择第三个按钮。
怎么了？

Answer 1

或者，您可以采用这种方式:

angular.module('plunker', ['ui.bootstrap']);
var Ctrl = function ($scope, $timeout) {
    $scope.isActive = [{active:true},{active:false},{active:false}];
    $scope.selectThirdTab = function () {
          $scope.isActive[2].active = true;
    }
}

和在HTML

    <tabset justified="true">
        <tab heading="First" active="isActive[0].active"></tab>
        <tab heading="Second" active="isActive[1].active"></tab>
        <tab heading="Third" active="isActive[2].active"></tab>
    </tabset>