在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類的變量

回答

相關問題