【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' }"

条件をつける場合

次に条件によってCSSプロパティに対する値を分岐させたい場合、
値にif構文の省略形をいれることで条件分岐が可能です。

<p ng-style="{ height : test ? test1+'px' : test2+'px' }">
myapp.controller('コントローラ要素', function ($scope) {
 $scope.test = true;
  $scope.test1 = 300;
  $scope.test2 = 600;
});

→pタグの高さは300pxになる

<p ng-style="{ height : test==1 ? test1+'px' : test2+'px' }">
myapp.controller('コントローラ要素', function ($scope) {
 $scope.test = 2;
  $scope.test1 = 300;
  $scope.test2 = 600;
});

→pタグの高さは600pxになる

これを応用して、こちらの記事の「ng-click、ng-class、CSSアニメーションで実装したアコーディオン」をng-style版でやってみました。

See the Pen ng-style by BICOxxx (@BICOxxx) on CodePen.

デバイスサイズによって高さを変えたい時など、算出した値を使いたい場合に使えそうですね!

参考サイト