Css 根据输入长度应用ng类

我有一个可以计数字符的输入框。此输入框称为ng model=social.text。我可以通过社交。文本。长度来得到那东西的长度

现在，我想从280减去input.text.length，所以我有{{280 social.text.length}

所有这些工作都顺利进行

然而！在我要设置的计数器中，如果数学返回小于100的值，我想将其背景颜色更改为黄色，如果小于50，则更改为红色

所以我设置了css类来应用背景色

现在，我需要根据字符串的长度以某种方式应用这些类

<div class="chip" id="socialCounter">
    {{280-social.text.length}}
</div> 

那么，我如何将ng类应用于此？我在这里完全迷路了，所以如果我看起来有点不连贯，我很抱歉。

使用ng class指令根据您提供的两个条件为div添加单独的类

ng-class="{'yellow' : (280 - social.text.length) < 100 && (280 - social.text.length) > 50, 'red' : (280 - social.text.length) < 50}"  

瑞德先生{ 背景色：红色； } 黄先生{ 背景颜色：黄色； } {{280 social.text.length} 您可以使用ng类来实现同样的功能

<!--css  -->

.red{
  background-color:red;
}
.yellow{
  background-color:yellow;
}

<!-- html -->

<div class="chip" id="socialCounter" ng-class="{'yellow':(280- social.text.length) <100 && (280- social.text.length) > 50  ,'red':(280- social.text.length) <50}" >
{{280-social.text.length}}
</div>

---

您可以使用*ngif/else创建3个块，一个从0到50，一个从51到100，还有一个大于100。在ever block中，您可以创建一个运行良好的固定类，尽管为了安全起见，我添加了一个.white类。