javascript - 创建切换按钮行为以隐藏或显示 div

Question

我正在尝试创建一个具有以下行为的按钮:

1) 当用户没有点击任何内容时，默认显示 ListView

2) 当用户点击Card View按钮时，List View隐藏，显示Card View

• Card View 类设置为 button button-clear button-dark
• List View 类设置为 button button-clear button-positive

3) 当用户点击List View按钮时，Card View隐藏，显示List View

• Card View 类设置为 button button-clear button-positive
• List View 类设置为 button button-clear button-dark

到目前为止，我已经设法完成了 1)，但我正在努力完成 2) 和 3)。

controller.js

function StatementsController($scope, $stateParams, DummyStatementsService) {
    $scope.active = true;
    $scope.toggle = function(view){
        if(view === 'list') {
            $scope.active = true;
        } else if(view === 'card') {
            $scope.active = false;
        }
    }
}

statements.view.html

<ion-content>
    <div class="row" style="margin-bottom: -1.35em" ng-controller="StatementsController">
        <div class="col">
            <button class="button button-clear button-dark" ng-click="toggle('list')">List View</button>
        </div>
        <div class="col col-right">
            <button class="button button-clear button-positive" ng-click="toggle('card')">Card View</button>
        </div>
    </div>

    <div ng-controller="StatementsController">
        <!-- List view -->
        <div ng-show="active">
            test 1
        </div>
        <!-- Card view -->
        <div ng-hide="active">
            test 2
        </div>
    </div>
</ion-content>

Answer 1

由于您确实要在向按钮添加 button-dark 或 button-positive 类之间切换，您可以这样做:

更新 (x2)

<ion-content> 
    <div ng-controller="StatementsController"> <!-- move the ng-controller out here -->
        <div class="row" style="margin-bottom: -1.35em">
            <div class="col">
                <button class="button button-clear" 
                        ng-class="{'button-positive': active, 'button-dark': !active}" 
                        ng-click="toggle('list')">List View</button>
            </div>
            <div class="col col-right">
                <button class="button button-clear" 
                        ng-class="{'button-positive': !active, 'button-dark': active}" 
                        ng-click="toggle('card')">Card View</button>
            </div>
        </div>
        <div>
            <!-- List view -->
            <div ng-show="active">
                test 1
            </div>
            <!-- Card view -->
            <div ng-hide="active">
                test 2
            </div>
        </div>
    </div>
</ion-content>