javascript - 使用 AngularJS 动态更新 CSS 样式

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

那么，实现它的“Angular ”方法是什么？

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

}