2013-02-22 117 views
10

这里是我的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.Box2myBoxes.Box3的值时,下面给出的代码片段完好。

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

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

回答

13

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

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

+3

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

+0

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

相关问题