html - 切换 css 类 angularjs

Question

我知道有一些类似的问题，但我想使用“showme”显示 css 类，如您在下面的代码中所见:

<section>
    <article class="" data-ng-controller="AplicationCtrl" data-ng-init="init();">
        <nav class="navbar menu-nav " role="navigation">
            <a href="" data-ng-click="showme=false;  left=true;">Show</a>
            <button data-ng-click="showme=true;  left=false;" >Hide</button> 
        </nav>
        <div class="navbar-default sidebar" role="navigation" data-ng-show="showme">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav customnavhov" id="side-menu">
                    <li><a href="#"><i class="fa fa-dashboard fa-fw fa-2x"></i></a></li>
                </ul>
            </div>
        </div>          
        <div class="navbar-default sidebar" role="navigation" data-ng-hide="showme">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav customnavhov" id="side-menu">
                    <li><a href="#"><i class="fa fa-dashboard fa-fw fa-2x"></i> Random text </a></li>
                </ul>
            </div>
        </div>
        <section data-ng-class="{'max-margin': showme,'min-margin':!showme}"> Content </section>
    </article>
</section>

应用程序显示取决于 showme first 或 second div 的值，但现在我想让右边的内容有一个 margin-left，这取决于选择的内容。

我的 Controller :

.controller('ApplicationCtrl', ['$scope', function($scope) {

    $scope.init = function() {
    };

    $scope.showme = false;

} ])

好吧，现在这很奇怪，如果我将按钮放在该部分内，则只能显示/隐藏 div，如果我将它放在该部分之后，则只能显示边距。不知道如何修复它。

Answer 1

您可以按照 Ismapro 的建议使用 ng-class。下面是一个例子

Example

data-ng-class="{'one': showme,'two':!showme}"

CSS

.one{margin-left:25px;}
.two{margin-left:75px;}