AngularJSを使用して動的にCSSスタイルを更新

Question

私はAngularJSを初めて使いました。私はそれを使用したい効果をどのように作成するのかよくわかりません。

2つの要素の値を比較し、その比較に基づいて要素のCSSを条件付きで更新したいと考えています。

これはjQueryやVanilla JSと非常に簡単ですが、Angularアプリでどのように同じことを達成できるかはわかりません。

私のコードを削除すると、これは基本的に変更する必要があります。

HTML：

<table> 
    <thead> 
    <tr> 
     <th>Minimum Price</th> 
     <th>New Price</th> 
    </tr> 
    </thead> 
    <tbody> 
     <td ng-bind="sku.MinimumPrice"></td> <!-- value one --> 
     <td> 
     <input ng-model="sku.NewPrice" id="price-input"> <!-- value two --> 
     </td> 
    </tbody> 
</table> 

擬似コード：

if (sku.NewPrice > sku.MinimumPrice) { 
    #price-input.style.color='red' 
} 

ので、これを実装する '角度' の方法は何ですか？

Answer 1

Using ng-style tag：

<input ng-model="MinimumPrice"/> 
<input ng-model="NewPrice"/> 
<p ng-style="getStyle()"> 
Text 
</p> 

---

function MyCtrl($scope) { 

    $scope.getStyle = function(){ 
     var color = 'black'; 

     if ($scope.NewPrice > $scope.MinimumPrice) { 
      color = 'red'; 
     } 

     return {'color': color}; 
    } 

} 

Answer 2

角度は、この目的のためにngStyleを持っています。この属性を使用すると、式や条件を使用してCSSをdinamycally変更することができます。

またはngClassを使用すると、すべてのDOMクラスをdinamycally変更できます（これが良いと思います）。 ngClassため

Ussageは次のとおりです。

<ANY ng-class="{class: condition}"> 

そう...

のstyle.css

.red { 
    color: red; 
} 

Template.html

<input ng-model="sku.NewPrice" id="price-input" ng-class="{red: sku.NewPrice > sku.MinimumPrice}" 

希望：