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

这里是我的HTML代码片段。在AngularJs中使用Expression动态生成ng类的变量

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

我所试图做的事： 我创建了将在使用上面写片断屏幕的顶部3个div元素。每个div元素将被赋予一个使用css的框形状。盒子（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变量名，那么它工作正常。例如，当我动态地更改变量myBoxes.Box1myBoxes.Box2和myBoxes.Box3的值时，下面给出的代码片段完好。

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

但是如果我生成纳克级可变动态"myBoxes.{{boxName}}"那么它不会表现得像一个变量。我确信有一个更好的方法来实现我正在尝试做的事情，但是我没有发现经过数小时和数小时的谷歌搜索/试验和错误。如果有人能帮助我会很高兴。

来源

2013-02-22 Durin

你几乎在那里，这是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>

来源

2013-02-22 09:05:44

真棒！奇迹般有效。但我仍然想知道为什么它通过使用数组表示法访问Json对象值而不是使用点表示法访问Json对象的常规方式。我是一个javscript新手，我很抱歉如果我提出一个非常基本的问题。 – Durin 2013-02-22 09:17:05

首先，'myBoxes。{{boxName}}'在Angular中不是有效的表达式，但是'myBoxes.boxName'和'myBoxes [boxName]'是。在Javascript中，这些表达式是相同的：'myBoxes.boxName'，'myBoxes ['boxName']'和'var name ='boxName'; myBoxes [name];'这意味着当你想要一个对象的属性，但你不知道属性名是什么时，你可以使用数组表示法来代替变量。 – 2013-02-22 09:27:51

编辑：哦！那么在这种情况下''{myBoxes'。 + name}}'也应该为我工作，因为它是一个有效的角度js表达式。但它不适合我。感谢您的解释。 – Durin 2013-02-22 09:46:08

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

回答

相关问题