CODEWITHSUNDEEP
angularjs
LCJ
LCJ

Reputation: 22662

Declarative way to change style based on number of characters in textarea

I have following AngularJS code which has a text area and a remaining count indicator, as shown below. If the user entered a character in textbox, the remaining count will be 99 ( which is 100 -1). I need to apply a style (named “tomato”) to the remaining count indicator when the user entered less than 3 characters in textarea. When the user enters more than 3 characters the style need to be changed.

What is the best declarative approach in AngularJS to apply the style based on the text length?

Note: I have written a function inside controller that will return true or false based on the length of text. But I am not sure how to use it to change the style.

Note: I am looking for an answer that does not do any DOM manipulation inside controller.

Code

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

Upvotes: 0

Views: 147

Answers (4)

LCJ
LCJ

Reputation: 22662

Found a useful declarative approach in the blog post with a checkbox styling example - Conditionally Apply a CSS Class with AngularJS

Following worked fine

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

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

Upvotes: 0

Charlie
Charlie

Reputation: 23798

Just use ng-class to monitor message scope variable

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

Or if you need to call a function for calculation, then use class and angular expression.

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

Your getClassByTextLength() function should return the string class name.

Upvotes: 0

Naga Sandeep
Naga Sandeep

Reputation: 1431

You can use this. You can remove the remaining() from controller as you can use 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>

Upvotes: 0

DanielC
DanielC

Reputation: 951

If by declarative you mean non-procedural, then my suggestion would be to use ng-class to assess the value of the ng-model "message"'s length.

ng-class="{tomato: message.length < 3, sky: message.length >= 3}"

This is the closest I can think of to declarative. Although it's probably, technically, functional.

Upvotes: 1

Related Questions