hugoyo5522
Subscription Service Pro
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 2
800 XP
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'
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"
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!!
Download
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!!
Download
