Code Snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show/hide password</title>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("passwordApp", []);
app.controller("passwordController", ['$scope', function ($scope) {
$scope.inputtype = 'password';
$scope.showHidePassword = function showHidePassword() {
if ($scope.inputtype == 'password')
$scope.inputtype = 'text';
else
$scope.inputtype = 'password';
};
$scope.thankyou = function thankyou() {
window.alert("Thank you!");
};
}]);
</script>
</head>
<body ng-app="passwordApp" ng-controller="passwordController">
<h2>Login page with Show & Hide Functionality:</h2>
<input type="text" placeholder="Username" id="username" name="username" ng-model="username"><br />
<input type="{{inputtype}}" placeholder="Password" id="password" name="password" ng-model="password"><br />
<input type="checkbox" id="checkboxG1" class="testclass" ng-click="showHidePassword()" />Show Password<br />
<button ng-click="thankyou()">Login</button>
</body>
</html>
How it Looks:
No comments:
Post a Comment