CODEWITHSUNDEEP
javascriptangularjsionic-framework
methuselah
methuselah

Reputation: 13206

Create toggle button behaviour to hide or show div

I am trying to create a button that has the following behaviour:

1) By default List View is showed, when the user doesn't click on anything

2) When the user clicks on the Card View button, List View is hidden, Card View is shown

3) When the user clicks on the List View button, Card View is hidden, List View is shown

So far I've managed to get 1) done, but I am struggling to get 2) and 3) done.

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>

Upvotes: 1

Views: 980

Answers (2)

Lex
Lex

Reputation: 7194

Since you are really toggling between adding either the button-dark or the button-positive class to the buttons you can do it like this:

Updated (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>

Upvotes: 3

DavidA
DavidA

Reputation: 4184

I would do something like:

controller:

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>

or, using an 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>

Upvotes: 2

Related Questions