AngularJsのExpressionを使用してng-classの変数を動的に生成

ここに私のHTMLコードからのスニペットがあります。AngularJsのExpressionを使用してng-classの変数を動的に生成

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

私がやろうとしています何

：私は上記の記述されたスニペットを使用して、画面の一番上になります3つのdiv要素を作成しました。各div要素にはcssを使用してボックスの形が与えられます。ボックス（div）は背景として赤色、背景として黒色のいずれかを持つことができます。 2色の

CSSは次のとおりです。ここで

.redBackground{ 
    background-color: red; 
} 

.blackBackground{ 
    background-color: black; 
}

は私のコントローラからの抜粋です。この例では

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

私は静的なJSONとして$scope.myBoxesてきたが、実行時に、私がすることを計画しますJsonコードを生成して、ボックスに背景色を動的に割り当てることができます。

私が直面している問題：問題は、色付きのボックスがまったく見えないことです。この場合のng-class変数名も、動的に生成されます。 ng-repeatを使用せず、ng-class変数名を動的に生成しない場合、正常に動作します。たとえば、私がvaribalesの値を動的に変更するときのスニペットについては、myBoxes.Box1myBoxes.Box2とmyBoxes.Box3のようになります。私は動的に"myBoxes.{{boxName}}" NG-クラス変数を生成する場合

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

しかし、それは変数のように動作しません。私は何をしようとしているかを達成するためのより良い方法があると確信していますが、何時間も何時間ものグーグル/試行錯誤の後、それを見つけることができませんでした。誰かが私を助けることができたらうれしいです。

出典

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

まず、 'myBoxes。{{boxName}}'はAngularの有効な式ではありませんが、 'myBoxes.boxName'と' myBoxes [boxName] 'は有効です。 Javascriptでは、これらの式は同じです： 'myBoxes.boxName'、' myBoxes ['boxName'] 'および' var name = 'boxName'; myBoxes [name]; 'これは、オブジェクトのプロパティが必要だが、プロパティ名がわからないときは、代わりに変数で配列表記を使用できることを意味します。 –

編集：ああ！その場合は '{{'myBoxes。' + name}} 'は有効な角度のjs式であるため、私のためにも動作するはずです。しかし、それは私のためには機能しません。ありがとうございます。 – Durin

AngularJsのExpressionを使用してng-classの変数を動的に生成

答えて

関連する問題