Question

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

1）默认情况下，当用户未点击任何内容时显示List View

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>

Answer 2

我会做类似的事情：

控制器：

function StatementsController($scope, $stateParams, DummyStatementsService) {
    $scope.view = 'list';
}

HTML：

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

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

或使用ng-switch：

<div ng-switch="view">
    <!-- List view -->
    <div ng-switch-when="list">
        test 1
    </div>
    <!-- Card view -->
    <div ng-switch-when="card">
        test 2
    </div>
</div>

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

2 个答案: