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

Question

我在 Angular JS 应用程序中使用了以下 html sn-p

    <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 选项卡，因此按钮应显示“构建 iOS 应用程序”。如果选择了 Android 选项卡，则按钮将显示“构建 Android 应用程序”。我需要根据选项卡的状态设置平台变量，它应该很简单，但我不确定是否可以使用 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;
}