Angularjs Hide Show Clean coding

Question

Hey guys I wonder if there's a solution on this mess I normally create in Angular projects:

app.controller('indexController', function ($scope) {
    scope.hideWinkelContainer = true;
    scope.hideWinkelPaneel = true;
    scope.headerCart = false;
    scope.showCart = function () {
        scope.hideWinkelContainer = false;
        scope.hideWinkelPaneel = false;
    };
    scope.hideCart = function () {
        scope.hideWinkelContainer = true;
        scope.hideWinkelPaneel = true;
    };
});

html:

<div class="containerWinkelwagen" ng-hide="hideWinkelContainer"> <div class="winkelWagenPaneel" ng-hide="hideWinkelPaneel">
    <div class="winkelWagenTerug" ng-click="hideCart()"></div>
    <div class="winkelWagenTerug" ng-click="showCart()"></div>
 </div> 
</div>

Best practices, tips, examples are always welcome!

What is wrong with what you have written ? Are you looking for some optimisation ? Don't forget to keep it simple for maintainability (lel angular maintainability)! — Pogrindis
– Pogrindis, Commented Aug 12, 2015 at 13:16

Erazihel · Accepted Answer · 2015-08-12 13:27:50Z

2

You can simply use a toggle function as follow:

app.controller('indexController', function ($scope) {
    $scope.hideWinkelContainer = true;
    $scope.hideWinkelPaneel = true;
    $scope.headerCart = false;

    $scope.toggleCart = function () {
        $scope.hideWinkelContainer = !$scope.hideWinkelContainer;
        $scope.hideWinkelPaneel    = !$scope.hideWinkelPaneel;
    };
});

In your HTML:

<div class="containerWinkelwagen" ng-hide="hideWinkelContainer">
    <div class="winkelWagenPaneel" ng-hide="hideWinkelPaneel">
        <div class="winkelWagenTerug" ng-click="toggleCart()"></div>
        <div class="winkelWagenTerug" ng-click="toggleCart()"></div>
    </div> 
</div>

edited Aug 12, 2015 at 13:27

answered Aug 12, 2015 at 13:17

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Lonardo · Accepted Answer · 2015-08-12 13:18:03Z

1

You can implement the show/hide functions once in a factory, and then inject it into the controllers that need it. Saves a lot of boilerplate.

answered Aug 12, 2015 at 13:18

Chris Lonardo

1413 bronze badges

Collectives™ on Stack Overflow

Angularjs Hide Show Clean coding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related