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

Question

我有一个可以计算字符数的输入框。这个输入框叫做 ng-model="social.text"。我可以通过 social.text.length.

得到那个东西的长度

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

所有这一切都顺利进行。

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

所以我 css classes 设置应用背景颜色。

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

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

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

Answer 1

根据您提供的两个条件，使用 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('Whosebug', []);

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="Whosebug" 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>

Answer 2

你可以使用ng-class directive来实现同样的效果

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

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

Apply ng-class based on length of Input

css

angularjs

ng-class