[解決済み] Angular JSでCSSのスタイル属性を動的に適用する

質問

簡単な問題のはずなのですが、解決策が見つかりません。

私は次のようなマークアップを持っています。

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

背景色をスコープに束縛させたいので、こんな感じでやってみました。

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

これではダメだと思い、いろいろ調べてみると ng-style を見つけたのですが、これもうまくいかなかったので、動的な部分を取り除いて、スタイルをハードコーディングして ng-style にハードコードしてみました。

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

となっていて、それすらもうまくいきません。私が誤解しているのは、どのように ng-style がどのように機能するかを誤解しているのでしょうか？このような場合 {{data.backgroundCol}} をプレーンのスタイル属性に入れ、その値を挿入するようにする方法はありますか？

どのように解決するには？

ngStyle ディレクティブにより CSS のスタイルを動的に設定することができます。

表現方法 は，キーがCSSスタイル名であり，値がそれらのCSSキーに対応する値であるオブジェクトにevalする。いくつかのCSSスタイル名はオブジェクトのための有効なキーではないので、それらは引用されなければならない。

ng-style="{color: myColor}"

あなたのコードはこうなります。

<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>

スコープ変数を使いたい場合。

<div ng-style="{'background-color': data.backgroundCol}"></div>

ここで を使用した fiddle の例です。 ngStyle を使用した例と、その下に実行中のスニペットを記述しています。

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.items = [{
      name: 'Misko',
      title: 'Angular creator'
    }, {
      name: 'Igor',
      title: 'Meetup master'
    }, {
      name: 'Vojta',
      title: 'All-around superhero'
    }

  ];
});

.pending-delete {
  background-color: pink
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}">

  <input type="text" ng-model="myColor" placeholder="enter a color name">

  <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
    name: {{item.name}}, {{item.title}}
    <input type="checkbox" ng-model="item.checked" />
    <span ng-show="item.checked"/><span>(will be deleted)</span>
  </div>
  <p>
    <div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>
</div>