使用AngularJs中的Expression动态生成ng类的变量

一尘不染

使用AngularJs中的Expression动态生成ng类的变量

angularjs

这是我的HTML代码的摘录。

<div ng-repeat="boxName in boxNameList">
    <div ng-class="myBoxes.{{boxName}}">{{boxName}}</div>
</div>

我正在尝试做的事情：
我已经使用上述代码段创建了3个div元素，它们将位于屏幕顶部。每个div元素都将使用css赋予框的形状。一个box（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-class变量名也是动态生成的。如果我不使用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}}"则它的行为就不像变量。我敢肯定会有更好的方法来实现我要完成的任务，但是经过数小时的谷歌搜索/尝试和错误后，我却找不到。如果有人能帮助我会很高兴。

阅读 229

2020-07-04

共1个答案

一尘不染

你几乎没有，这是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','Box2','Box3'];
        $scope.myBoxes={
              Box1: "redBackground",
              Box2: "blackBackground",
              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>

2020-07-04