Home / Web Development / Angular Js / Simple Textarea text Counter using AngularJS

Simple Textarea text Counter using AngularJS

This little and useful, textarea character counter using Javascript ang AngularJS. Here is one of the simple method use the textarea counter. This is useful to limited character field in forms.This demonstrates using AngularJS for a live character count input.

The <html> element is the container of the AngularJS application ‘ng-app=”myappnote”‘

<html ng-app=”myappnote”>

A <div> in the HTML page is the scope of a controller: ng-controller=”myctrlnote”.The ng-controller directive helps to defines the application controller.

<div ng-controller=”myctrlnote”>

ng-model directive binds the value of HTML controls (input, select, textarea) to application data.Here ng-model directive binds a <textarea> to the controller variable message.

<textarea ng-model=”message” cols=”40″ rows=”10″></textarea>

The two ng-click events invoke the controller functions clear() and save().

<button ng-click=”save()”>Save</button>
<button ng-click=”clear()”>Clear</button>

An ng-bind directive binds the controller function left() to a <span> displaying the characters left

Number of characters left: <span ng-bind=”left()”>&lt/span>

Full Code

Loading Facebook Comments ...
Social Media Auto Publish Powered By : XYZScripts.com