【AngularJS】スコープを使ってngStyleを動的に変化させる【条件】

ng-classの記事はよく見るのですが、ng-styleでスコープのプロパティを使ったり条件つけたりする方法が今いち分からなかったので、まとめました。

ng-styleの使い方

基本的な書き方

◯ ng-style="{ height :  '300px' }"
×  ng-style="{ height :  300px }"
×  ng-style="{ height :  300 }"

◯ ng-style="{ height : '300px' }"
◯ ng-style="{ 'height' : '300px' }"

◯ ng-style="{ 'margin-top' : '300px' }"
◯ ng-style="{ marginTop : '300px' }"
×  ng-style="{ margin-top : '300px' }"

“-“(ハイフン)が入ってるCSSプロパティはそのまま書くとハイフンが演算子に見られエラーになるため、シングルクォーテーションで囲む(‘margin-top’)か、キャメルケースにする(marginTop)必要があります。

スコープのプロパティを使う

この場合も上記のルールにしたがって記載すればok。

ng-style="{ height : test+'px' }"

myapp.controller('コントローラ要素', function ($scope) {
　　　　$scope.test = 300;
});

スコーププロパティが数値ならng-style内でpxを追加してもいいし、

ng-style="{ height : test }"

myapp.controller('コントローラ要素', function ($scope) {
　　　　$scope.test = "300px";
});

スコーププロパティ側で文字列で渡してあげても動きます。

調べる中で以下の書き方を見かけましたが、こちらはダメでした。
開発者ツールの要素パネルをみると、{{test}}の部分は数値に置き換わっているのですが、{{}}で構文エラーが発生しているようで反映されず。。

×  ng-style="{ height : {{test}} }"
×  ng-style="{ height : {{test}}+'px' }"

<p ng-style="{ height : test ? test1+'px' : test2+'px' }">

myapp.controller('コントローラ要素', function ($scope) {
　$scope.test = true;
  $scope.test1 = 300;
  $scope.test2 = 600;
});

<p ng-style="{ height : test==1 ? test1+'px' : test2+'px' }">

myapp.controller('コントローラ要素', function ($scope) {
　$scope.test = 2;
  $scope.test1 = 300;
  $scope.test2 = 600;
});