<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reverse a String using AngularJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<style type="text/css">
#main
{
width:960px;
margin:50px auto;
font-family:raleway;
}
#form_layout
{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: -2px;
}
</style>
<script type="text/javascript">
var app = angular.module("MyApp", []);
app.filter("reverse", function() {
return function(input) {
var result = "";
input = input || "";
for (var i=0; i<input.length; i++) {
result = input.charAt(i) + result;
}
return result;
};
});
</script>
</head>
<body ng-app="MyApp">
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<br> <br><br> <br><br> <br><br> <br>
<div class="modal-dialog">
<div class="modal-content">
<h2 align="center"> Reverse a String Using AngularJS</h2>
<hr color =" black">
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-4"> Enter the String : </label>
<div class="col-xs-6">
<input type="text" class="form-control" id="text1" ng-model="text" placeholder="Enter text"/>
</div>
</div>
<br>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-4">
<input type="reset" class="btn btn-default" value="Reset" onClick="history.go(0)" >
</div>
</div>
<br>
<div class="form-group">
<label class="control-label col-xs-2"> </label>
<div class="col-xs-6">
<b>Reversed String is : <span style="color:red"> {{ text | reverse }} </span></b>
<br>
</div>
</div>
</div>
</form>
</div>
</div >
</div>
</body>
</html>
Output:
No comments:
Post a Comment