Question

我有一个输入框，我可以在其中计算字符。此输入框称为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？我在这里很迷路，因此，如果我看起来有点不连贯，对不起。

Answer 1

您可以使用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

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

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

2 个答案: