Question

我有以下AngularJS代码，它有一个文本区域和一个剩余计数指示器，如下所示。如果用户在文本框中输入了一个字符，则剩余的计数将为99（即100 -1）。当用户在textarea中输入少于3个字符时，我需要将样式（名为“tomato”）应用于剩余计数指示符。当用户输入超过3个字符时，需要更改样式。

AngularJS中基于文本长度应用样式的最佳声明方法是什么？

注意：我在控制器中编写了一个函数，它将根据文本的长度返回true或false。但我不知道如何用它来改变风格。

注意：我正在寻找一个不在控制器内部进行任何DOM操作的答案。

代码

<html>
<head>
<style>

.sky 
 {
    color:white; background-color:lightblue; padding:10px;
 }
 .tomato 
 {
    background-color:coral;padding:20px;
 }

</style>


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

<script type="text/javascript">   

   var TextLimitController= function ($scope) 
   {

    $scope.message = '';
    $scope.maxLength = 100;

    $scope.remaining = function () {    
        return $scope.maxLength - $scope.message.length;
    };

    $scope.shouldWarn = function () {
        return $scope.remaining() > 97
    };

   };
</script>
</head>

<body ng-app>

     <div ng-controller="TextLimitController">
    Pick Style:
    <select ng-model="homeModel">
        <option value="sky">Sky</option>
        <option value="tomato">Tomato</option>
    </select>

    <div ng-class="homeModel">
      Welcome Home!
    </div>

    <br/>

    <div ng-class = "homeModel"  >
         Remaining: {{remaining()}} 
    </div>
    <br/>

    <div>   
        <textarea ng-model = "message">  {{message}} </textarea>
    </div>

    <div>   
        <button ng-click="send()">Send</button>
        <button ng-click="clear()">Clear</button>
    </div>
     </div>
</body>
</html>

Answer 1

如果声明中你的意思是非程序性的，那么我的建议是使用ng-class来评估ng-model＆＃34; message＆＃34;的长度。

library(coxphf)
library(survival)
train <- data.frame(time=c(4,3,1,1,2,2,3), 
          status=c(1,1,1,0,1,1,0), 
          x=c(0,2,1,1,1,0,0)) 

test <- data.frame(x=c(0,2,1,1,1,0,0)) 
fit.coxph <- coxph(Surv(time, status) ~ x, train) 
fit.coxphf <- coxphf(Surv(time, status) ~ x, train) 

predict(fit.coxph, test)
predict(fit.coxphf, test)

这是我能想到的最接近陈述的。虽然它在技术上可能是功能性的。

Answer 2

只需使用ng-class来监控message范围变量

<textarea ng-model = "message" ng-class="message.length <= 3 ? tomato : sky ">  {{message}} </textarea>

或者，如果您需要调用函数进行计算，请使用class和角度表达式。

<textarea ng-model = "message" class="{{getClassByTextLength()}}">  {{message}} </textarea>

您的getClassByTextLength()函数应该返回字符串类名。

Answer 3

你可以用它。您可以使用remaining()

从控制器中删除length

<div ng-class = "homeModel" class="{{ message.length<3 ? 'tomato' : 'sky' }}" >
         Remaining: {{100 - message.length}} 
</div>
<br/>

<div>   
    <textarea ng-model = "message">  {{message}} </textarea>
</div>

Answer 4

在博客文章中找到了一个有用的声明性方法，其中包含复选框样式示例 - Conditionally Apply a CSS Class with AngularJS

以下工作正常

<div ng-class="{ 'tomato' : shouldWarn(), 
                 'sky' : !shouldWarn()  
               }" >

         Remaining: {{remaining()}} 
</div>

根据textarea中的字符数改变样式的声明方式

4 个答案: