My goal is to implement a button with specific behavior:
1) Initially, the List View is displayed as default
2) When the user clicks on the button labeled Card View, the List View is hidden and the Card View is shown. The classes for these views are set as follows:
- Class of
Card View:button button-clear button-dark - Class of
List View:button button-clear button-positive
3) Upon clicking the List View button, the Card View is hidden while the List View is displayed. The respective classes are adjusted accordingly:
- Class of
Card View:button button-clear button-positive - Class of
List View:button button-clear button-dark
Although I have successfully achieved point 1), I am encountering difficulties in implementing points 2) and 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>