javascript - Angularjs 隐藏 显示 干净的编码

Question

嘿，大家好，我想知道我通常在 Angular 项目中创建的这个困惑是否有解决方案:

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>

我们始终欢迎最佳实践、提示、示例!

Answer 1

您可以简单地使用toggle函数，如下所示:

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;
    };
});

在 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>