ng-classとclass CSS/style属性

Question

どちらか一方を使用する場合と、両方を同時にhtml要素（div、span、tableなど）に使用する必要がある場合はわかりません。お知らせ下さい。両方を混ぜると問題が生じるかもしれませんが、そうではありませんか？

Answer 1

Ngclassはあなたには、いくつかのロジックに基づいて、条件付きであることをクラスを必要とするときに使用される

は、このようなNG-クラスとして=「{ 『を-このクラスの選択』：ifThisAngularScopeIsTrueを}」

クラスだけですCSSの固定クラス

Answer 2

ng-classディレクティブは、1つ以上のCSSクラスをHTML要素に動的にバインドします。

例：ng-class

Answer 3

ご希望のデザインに合うようにあなたは、クラスとスタイルの属性を使用する必要があります。 ng-classディレクティブは、いくつかの変数や式に基づいていくつかのhtmlのクラスを変更する場合に一般的に使用されます。 DOはさらなる洞察のためthisを読む）

;

は、ここで簡単な例

angular.module('app', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<style> 
 
    .blue { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: blue; 
 
    display: block; 
 
    } 
 
    .red { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: red; 
 
    display: block; 
 
    } 
 
</style> 
 
<div ng-app="app"> 
 
    <div style="height: 100px; width 100%; background-color: red; display: block;" ng-class="{'red': red == true, 'blue': red == false}"></div> 
 
    <br /> 
 
    <button ng-click="red = !red">Changing Red to Blue won't work because of the style attribute!</button> 
 
    <br /> 
 
    <br /> 
 
    <div class="blue" ng-class="{'blue': blue, 'red': !blue}"></div> 
 
    <br /> 
 
    <button ng-click="blue = !blue">Toggle between Red & Blue</button> 
 
</div>

スタイル属性は、クラスを上書きする方法をインラインお知らせです。