根据输入的长度应用 ng-class答案

【问题标题】：Apply ng-class based on length of Input根据输入的长度应用 ng-class
【发布时间】：2019-01-13 19:18:33
【问题描述】：

我有一个可以计算字符的输入框。这个输入框叫做 ng-model="social.text"。我可以通过 social.text.length 获得那个东西的长度。

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

这一切都顺利进行。

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

所以我设置了应用背景颜色的 css 类。

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

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

那么我该如何应用 ng-class 呢？我在这里很迷茫，所以如果我看起来有点语无伦次，我很抱歉。

【问题讨论】：

您可以使用 *ngif / else 并制作 3 个块，一个从 0 到 50，一个从 51 到 100，一个大于 100。在 ever 块中，您可以制作一个固定的类

标签： css angularjs ng-class

【解决方案1】：

你可以使用ng-classdirective来达到同样的效果

<!--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>

plnkr demo

【讨论】：

效果很好，虽然我确实添加了一个 .white 类只是为了安全。

【解决方案2】：

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

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

var app = angular.module('stackoverflow', []);

app.controller('MainCtrl', function($scope) {

});

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="stackoverflow" ng-controller="MainCtrl">
  <input type="text" ng-model="social.text">
  <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>
</div>

【讨论】：