Question

我在Angular JS应用中使用了以下html代码段

    <div class="portlet-title tabbable-line">
        <button class="btn btn-sm  green pull-left" ng-click="buildApp(platform)"> {{ getText(platform) }} </button> 
        <ul class="nav nav-tabs ">
            <li class="active">
                <a href="#" data-target="#tab_1_1" data-toggle="tab">iOS</a>
            </li>
            <li>
                 <a href="#" data-target="#tab_1_2" data-toggle="tab">Android</a>
            </li>

        </ul>          
    </div>

我试图弄清楚如何根据选择的选项卡来设置按钮文本。最初，iOS选项卡处于选中状态，因此按钮应显示“ Build iOS App”。如果选择了Android选项卡，则该按钮将显示“ Build Android App”。我需要根据选项卡的状态设置平台变量，这应该很简单，但是我不确定是否可以使用angular来完成。

Answer 1

您必须在更改标签时调用函数，因此您可以像

一样进行操作

<div class="portlet-title tabbable-line">
            <button class="btn btn-sm  green pull-left" ng-click="buildApp(platform)"> {{ btnName }} </button> 
            <ul class="nav nav-tabs ">
                <li class="active">
                    <a href="#" data-target="#tab_1_1" data-toggle="tab" ng-click="btn('iOS')">iOS</a>
                </li>
                <li>
                     <a href="#" data-target="#tab_1_2" data-toggle="tab" ng-click="btn('Android')">Android</a>
                </li>
            </ul>          
        </div>

在控制器中

 $scope.btnName = 'iOS';
$scope.btn = function (name) {
    $scope.btnName = name;
}

如何根据所选选项卡的状态更改按钮文本

1 个答案: