Question

我使用了角度UI选项卡，我有按钮切换到不同的选项卡。我试图在相同的选项卡处于活动状态时更改该选项卡的按钮样式。所以我使用ng-class来改变样式。

我有一个功能在范围内，它返回活动标签

 $scope.getActive = function() {
     return tabSelector.active;
    console.log("active tab = " + tabSelector.active);

 }

此函数返回数字0,1,2或3，具体取决于哪个选项卡处于活动状态

这是我的CSS课程

.btn-white-hollow {
    padding: 20px 20px 20px 20px;
    margin-top: 16px;
    background-color: #fff;
    color: #0A135E;
    font-weight: bolder;
    -webkit-transition: all linear .2s;
    transition: all linear .2s;
}

.btn-white-hollow-selected {
    padding: 20px 20px 20px 20px;
    margin-top: 16px;
    background-color: #fff;
    color: #fd7400;
    border-bottom: 2px solid #fd7400;
    background: #fff;

}

我尝试使用这种格式的ng类，但它不起作用。

 <li class="seekerhead" >
    <button  type="button" ng-class= { 'btn-white-hollow-selected' : getActive() == '0', 'btn-white-hollow' : getActive!== '0' }>Ask a Question
    </button>
</li>

问题是ng-class没有拿起css类。我甚至试过getActive!== 0，但这也不起作用我如何使它工作

Answer 1

即使给定的代码遗漏了某些信息，您也应该能够按照此代码实现所需的代码。在控制器内部定义一个附加到作用域的活动变量，初始化为您希望默认为活动变量的面板变量。

$scope.activeTab = 1; //supposing you want the first one to be enabled

然后在选项卡的HTML代码中使用以下代码： <button type="button" ng-class="{ 'btn-white-hollow-selected' : activeTab === 1, 'btn-white-hollow' : activeTab !== 1 }" ng-click="activeTab = 1"> Ask a Question </button>

这假设您发布的按钮是与选项卡对应的按钮。

更改活动标签

1 个答案: