Обновление стилей CSS динамически с помощью AngularJS

Question

Я новичок в AngularJS, и я не уверен, как создать эффект, который я хочу использовать.

Я хотел бы сравнить значения двух элементов и условно обновить 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 с помощью выражений и условий.

Или вы можете использовать ngClass, что позволит вам изменить динамический класс DOM (и это лучше, я думаю).

Ussage для ngClass является:

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

Надеюсь, это вам поможет :)