Hi rani,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
$scope.Validate = function () {
var password = $scope.Password;
//Regular Expressions.
var regex = new Array();
regex.push("[A-Z]"); //Uppercase Alphabet.
regex.push("[a-z]"); //Lowercase Alphabet.
regex.push("[0-9]"); //Digit.
regex.push("[$@$!%*#?&]"); //Special Character.
var passed = 0;
for (var i = 0; i < regex.length; i++) {
if (new RegExp(regex[i]).test(password)) {
passed++;
}
}
if (passed > 2 && password.length > 8) {
passed++;
}
switch (passed) {
case 0:
case 1:
$scope.Style = { "height": "10px", "background-color": "red" };
break;
case 2:
$scope.Style = { "height": "10px", "background-color": "darkorange" };
break;
case 3:
case 4:
$scope.Style = { "height": "10px", "background-color": "green" };
break;
case 5:
$scope.Style = { "height": "10px", "background-color": "darkgreen" };
break;
}
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<input type="password" name="Password" ng-model="Password" ng-keyup="Validate()" />
<br /><div ng-style="Style" ng-show="Password"></div>
</div>
</body>
</html>
Demo
