Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

AngularJS Convert Text to Uppercase While Typing in Textbox

Feb 10, 2015
Introduction

Here I will explain how to convert entered text to uppercase using
AngularJS. Generally in JavaScript we will use uppercase property to convert our text to uppercase same way in AngularJS we have uppercase property where can set to convert user entered to uppercase.

Description:
  
In previous articles I explained Angularjs refresh div for every 1 second using interval mode, 5 + Angularjs Gridview and table plugin examples with demos,
jQuery redirect to another page after 5 seconds and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to convert entered text to uppercase using AngularJS.

To convert entered text to uppercase using AngularJS we need to write the code like as shown below


<div>
Enter Text :<input type="text" data-ng-model="txtName" />
Entered Text is:<b>{{txtName|uppercase}}</b>
</div>
If you want to check it in complete example you need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to Convert Text to UpperCase in Angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
<div>
Enter Text :<input type="text" data-ng-model="txtName" />
</div>
Entered Text is:<b>{{txtName|uppercase}}</b>
</form>
</body>
</html>
Live Demo

To check live demo try to enter text in textbox and check


Enter Text :
Entered Text is:{{txtName|uppercase}}

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

3 comments :

Phani said...
This comment has been removed by the author.
Phani said...
This comment has been removed by the author.
Phani said...

inside the bold tag keep txtName in between 2 curly brackets

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.