Simple Hide/Show Password Using AngularJS

Submitted by razormist on Friday, January 27, 2017 - 17:00.

In this tutorial, we will create a Simple Hide/Show Password Using AngularJS. AngualarJS is a structural framework for dynamic web application. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template. So let's get started. Creating A Mark Up To create a form, open any kind of text editor(notepad++, etc). Then copy/paste the code below, and save it 'index.html'

<!DOCTYPE html>
<html lang = "en">
        <head>
                <link rel =  "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
                <script src = "js/angular.js"></script>
                <script src = "js/script.js"></script>
        </head>
<body ng-app = "myModule">
        <nav class = "navbar navbar-default">
                <div class = "container-fluid">
                        <a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class = "row">
                <div class = "col-md-3"></div>
                <div class = "col-md-6 well" ng-controller = "myController">
                <h3 class = "text-primary">Simple Show/Hide Password Using Angular.js</h3>
                <hr style = "border-top:1px dotted #000;" />
                <div style = "width:20%;">
                        <input type = "checkbox" ng-model = "hidePass" /><label>Show Password</label>
                </div>          
                <br /><br /><br />
                <table class = "table table-bordered alert-warning">
                        <thead>
                                <tr>
                                        <th>Name</th>
                                        <th>Username</th>
                                        <th ng-hide = "hidePass">Password</th>
                                        <th ng-show = "hidePass">Password</th>
                                </tr>
                        </thead>
                        <tbody>
                                <tr ng-repeat = "member in members">
                                        <td>{{member.name}}</td>
                                        <td>{{member.username}}</td>
                                        <td ng-hide = "hidePass">************</td>
                                        <td ng-show = "hidePass">{{member.password}}</td>
                                </tr>
                        </tbody>
                </table>
                </div>
        </div>
</body> 
</html>

The code above will display all the data from the angularjs script. The ng-show is an attribute that express in showing a targeted element. The ng-hide is an attribute that express in hiding a targeted element. Creating a script To make the function worked, we will try to create functional script. To do that copy/paste the code below, then name it "script.js"

var myApp = angular.module("myModule", [])
                                 .controller("myController", function($scope){
                var members = [
                        {name: "Juan Dela Cruz", username: "handsome", password: "imagay"},
                        {name: "San Pedro", username: "awesome", password: "tothemax"},
                        {name: "Luis Buitton", username: "flying", password: "withoutwings"},
                        {name: "San Carlos", username: "bridge", password: "birche"},
                        {name: "Abra", username: "Kadabra", password: "alakazam"}
                ];
                $scope.members = members;
});

The code above will now worked, when the user checked the show password the hidden password will show its meaning. There you have it, we created a simple hide/show password. I hope that this tutorial help you to your projects. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Add new comment

36 views