Question

我想在点击按钮后将类添加到多个div。这是我的代码：

 $scope.noneStyle = "noneVisible";
    $scope.bodyCon = "notRotate";
    $scope.addStyle = function () {

        if ($scope.noneStyle === "noneVisible" && $scope.bodyCon ==="notRotate") {
            $scope.noneStyle = "visibleStyle";
            $scope.bodyCon = "rotate";
        }
        else
            $scope.noneStyle = "noneVisible";
            $scope.bodyCon = "notrotate";

    }

HTML

<a href="#" ng-click="addStyle()">Click</a>

<aside class="rightbar {{noneStyle}} {{visibleStyle}}"></aside>
<div class="container-fluid {{bodyCon}} {{rotate}}"></div>

这是Demo：http://jsfiddle.net/sadeghbayan/dbnb2f9x/

Answer 1

您正尝试在标记visibleStyle和rotate中打印未在范围中定义的范围变量。

您使用这些名称作为字符串，而不是javascript变量。解决这个问题，一切都应该正常。

Answer 2

您的解决方案无效的原因是因为{{noneStyle}}会立即被解析为文本。您可以使用ng-class来实现此目的。

我已经编辑了你的JsFiddle来实现这个目标：

http://jsfiddle.net/dbnb2f9x/3/

myApp.controller('mainCtrl', function ($scope) {

    $scope.noneStyle = false;
    $scope.bodyCon = false;

    //Toggle the styles
    $scope.toggleStyle = function () {
        //If they are true, they will become false 
        //and false will become true
        $scope.bodyCon = !$scope.bodyCon;
        $scope.noneStyle = !$scope.noneStyle;            
    }
});

并在HTML中：

<div ng-app="myApp" ng-controller="mainCtrl">
    <a href="#" ng-click="toggleStyle()">Click</a>
    <aside ng-class="{'noneStyle' : noneStyle}"class="rightbar"></aside>
    <div ng-class="{'bodyCon' : bodyCon}" class="container-fluid"></div> 
</div>

当bodyCon $ scope变量为true时，由于此规则，类'bodyCon'将被添加到div：

ng-class="{'bodyCon' : bodyCon}"

您可以添加多个语句：

ng-class="{'bodyCon' : bodyCon, 'helloWorldClass' : myVariable == 'helloWorld'}"

在上面的示例中，当$ scope.myVariable等于'helloWorld'时，将添加类：“helloWorldClass”

希望这可以帮助您解决问题！

单击Angular后，将类添加到多个选择器

2 个答案: