web-dev-qa-db-ja.com

AngularJsの式を使用してngクラスの変数を動的に生成する

これが私のHTMLコードの抜粋です。

<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変数名を動的に生成しない場合は、正常に機能します。たとえば、以下のスニペットの場合、変数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>

ただし、ng-class変数を動的に"myBoxes.{{boxName}}"生成すると、変数のように動作しません。私がやろうとしていることを達成するためのより良い方法があると確信していますが、何時間もグーグル/試行錯誤の後でそれを見つけることができませんでした。誰かが私を助けてくれたら嬉しいです。

javascripthtmlangularjshtml5angularjs-directive
10
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>
13
Anders Ekdahl