javascript – 使用AngularJ中的表达式动态生成ng类的变量

这是我的 HTML 代码片段.

<div ng-repeat="BoxName in BoxNameList">
    <div ng-class="myBoxes.{{BoxName}}">{{BoxName}}</div>
</div>

我想做什么：
我已经创建了3个div元素,它们将使用上面的代码段在屏幕顶部.将使用css给每个div元素一个框的形状.盒子(div)可以以红色为背景或黑色为背景.

两种颜色的CSS是：

.redBackground{
   background-color: red;
}

.blackBackground{
  background-color: black;
}

这是我的控制器的一个片段：

$scope.BoxNameList=['Box1','Box2','Box3'];
$scope.myBoxes={
      Box1: "redBackground",Box2: "blackBackground",Box3: "blackBackground"
}

在这个例子中,我将$scope.myBoxes作为一个静态Json,但在运行时我计划生成Json代码,以便我可以动态地将背景颜色分配给我的框.

我面临的问题：问题是我无法看到有颜色的盒子.在这种情况下,您可以看到的ng类变量名称也是动态生成的.如果我不使用ng-repeat,并且不动态生成ng-class变量名,那么它可以正常工作.例如,对于下面给出的代码段,当我动态地更改varibales myBoxes.Box1 myBoxes.Box2和myBoxes.Box3的值时,它的工作原理完美.

<div ng-class="myBoxes.Box1">Box1</div>
<div ng-class="myBoxes.Box2">Box2</div>
<div ng-class="myBoxes.Box3">Box3</div>

但是,如果我动态地生成ng-class变量“myBoxes {{BoxName}}”,那么它不会像变量一样.我相信会有一个更好的方法来实现我想要做的,但是我无法在几个小时的谷歌/试验和错误之后找到.如果有人能帮助我,会很高兴

解决方法

你几乎在那里,它是myBoxes [BoxName]而不是myBoxes.{{BoxName}}.

这样的事情

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp',[]);

    myApp.controller('MainCtrl',['$scope',function($scope){
        $scope.BoxNameList=['Box1','Box3'];
        $scope.myBoxes={
              Box1: "redBackground",Box3: "blackBackground"
        }
    }]);
    </script>
    <style type="text/css">
    .redBackground{
       background-color: red;
    }

    .blackBackground{
      background-color: black;
    }
    </style>
</head>
<body ng-controller="MainCtrl">
    <div ng-repeat="name in BoxNameList">
        <div ng-class="myBoxes[name]">Box1</div>
    </div>
</body>
</html>

javascript – 使用AngularJ中的表达式动态生成ng类的变量

解决方法

相关推荐