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

那么，＆＃39; Angular＆＃39;是什么？实现这个的方法？

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

为此目的，Angular有ngStyle。这个属性允许你使用表达式和条件来改变你的CSS。

或者你可以使用ngClass让你在任何DOM类中改变dinamycally（我觉得这样更好）。

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

希望这可以帮助你：）

使用AngularJS动态更新CSS样式

2 个答案: