Expert Group of programming
Loading...

AngularJs: Functionality of textfield and textarea

Posted by : Heycode Tech | Posted in : Angularjs | Jul 30,2016 | 0 comments

We know that the textfield and textarea are mostly used field in programming world. Now here we are describing the some cases which is mostly used these field in AngularJs.

How to create Textfield and textarea in HTML with normal attribute:
Let"s see example
//For textfield
<input type="text" name="mytextfield" id="mytextfield" value="" />

//For textarea
<textarea name="mytextfield" id="mytextfield" rows="5" cols="5"></textarea> 

Let’s see these example in AngularJs and we will do some special work which is done very easily in AngularJs.

This article is the example of AngularJS.It is not describe about the AngularJS i.e what is ng-app and ng-controller etc.

1: AngularJS TextField
For creating an textfield in AngularJS is same as previous.But it have some extra attributes which is very valuable Like ng-model.

Before using the AngularJS, you need to write the : ng-app and ng-controller : and follow all AngularJS rules.Now you can download the code also.
Download Code

In example, we will count the Number of words as well as number of character. Let’s see it.

<body ng-app="myApp" ng-controller="myCtrl">
...
<label>TextField 1</label>
<input type="text" name="text1" id="text1" ng-model="text1">
<p><strong>Output : </strong> { { textval1 } }</xmp></p>
...
...
</body>


var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function($scope){
$scope.mytextfield =”Enter text”;
/*
* Count the word : condition : space
*/
$scope.get_wordCount = function (value) {
if (value && (typeof value === ‘string’)) {
return value.trim().split(/\s+/).length;
} else {
return 0;
}
};
/*
* Count the Character
*/
$scope.get_characterCount = function(str){
return str.replace(/ /g,”).length;
}
});


Let’ see the word count and character count example in AngularJS with the use of :Textarea : also.

Download Code

<body ng-app="myApp" ng-controller="myCtrl">
...
<label>TextArea 1</label>
<textarea name="text1" id="mytextarea" ng-model="mytextarea" rows="5" cols="20"></textarea>
<p><strong>Output : </strong> { { textval1 } }</xmp></p>
...
...
</body>


var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function($scope){
$scope.mytextarea =”Enter text”;
/*
* Count the word : condition : space
*/
$scope.get_wordCount = function (value) {
if (value && (typeof value === ‘string’)) {
return value.trim().split(/\s+/).length;
} else {
return 0;
}
};
/*
* Count the Character
*/
$scope.get_characterCount = function(str){
return str.replace(/ /g,”).length;
}
});

Download this code and use it and let me know if you need any other example of anything related with the ” textfield and textarea ” in Angular js and I will try to add this in our article.

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and moreHere is the Expert group of programming.