• We just launched and are currently in beta. Join us as we build and grow the community.

AngularJS Toggle Password Visibility

theflow

Search Guru
T
T Rep
0
0
0
Rep
0
T Vouches
0
0
0
Vouches
0
Posts
151
Likes
42
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 200 XP
This is the step by step procedure in this tutorial:

Step 1: Add the following dependency

In the header portion of your HTML, add the following:

  1. <link

     href

    =

    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

    rel

    =

    "stylesheet"

    >
  2. <link

     href

    =

    "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

    rel

    =

    "stylesheet"

    >
  3. <script

     src

    =

    "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"

    ></

    script

    >

Step 2: Add Style

Include the following style.

  1. <style type=

    "text/css"

    >
  2. .myInput{
  3. font-size

    :

    1em

    ;
  4. padding

    :

    1em

    ;
  5. }
  6. </style>

Step 3: Add the input

Next, we create our input type.

  1. <input

     type

    =

    "{{ inputType }}"

    class

    =

    "myInput"

    >

    <button

     type

    =

    "button"

    class

    =

    "btn {{ btnType }}"

    ng-click=

    "showhidePassword()"

    ><i

     class

    =

    "fa fa-{{ icon }}"

    ></

    i

    >

    {{ btnName }}</

    button

    >

Step 4: Creating our Angular JS Script

Last step is to create our script and name it as app.js.

  1. var

    app =

    angular.module

    (

    'app'

    ,

    [

    ]

    )

    ;

  3. app.controller

    (

    'myCtrl'

    ,

    function

    (

    $scope)

    {
  4. $scope.inputType

    =

    'password'

    ;
  5. $scope.btnName

    =

    'Show'

    ;
  6. $scope.btnType

    =

    'btn-primary'

    ;
  7. $scope.icon

    =

    'eye'

    ;

  9. $scope.showhidePassword

    =

    function

    (

    )

    {
  10. if

    (

    $scope.inputType

    ==

    'password'

    )

    {
  11. $scope.inputType

    =

    'text'

    ;
  12. $scope.btnName

    =

    'Hide'

    ;
  13. $scope.btnType

    =

    'btn-default'

    ;
  14. $scope.icon

    =

    'eye-slash'

    ;
  15. }
  16. else

    {
  17. $scope.inputType

    =

    'password'

    ;
  18. $scope.btnName

    =

    'Show'

    ;
  19. $scope.btnType

    =

    'btn-primary'

    ;
  20. $scope.icon

    =

    'eye'

    ;
  21. }
  22. }
  23. }

    )

    ;

  1. <!DOCTYPE html>
  2. <html

     ng-app=

    "app"

    >
  3. <head

    >
  4. <title

    >

    AngularJS Toggle Password Visibility</

    title

    >
  5. <meta

     charset

    =

    "utf-8"

    >
  6. <link

     href

    =

    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

    rel

    =

    "stylesheet"

    >
  7. <link

     href

    =

    "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

    rel

    =

    "stylesheet"

    >
  8. <script

     src

    =

    "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"

    ></

    script

    >
  9. <style

     type

    =

    "text/css"

    >
  10. .myInput{
  11. font-size: 1em;
  12. padding: 1em;
  13. }
  14. </

    style

    >
  15. </

    head

    >
  16. <body

     ng-controller=

    "myCtrl"

    >
  17. <div

     class

    =

    "container"

    >
  18. <h1

     class

    =

    "page-header text-center"

    >

    AngularJS Toggle Password Visibility</

    h1

    >
  19. <div

     class

    =

    "row"

    >
  20. <div

     class

    =

    "col-sm-4 col-sm-offset-4"

    >
  21. <input

     type

    =

    "{{ inputType }}"

    class

    =

    "myInput"

    >

    <button

     type

    =

    "button"

    class

    =

    "btn {{ btnType }}"

    ng-click=

    "showhidePassword()"

    ><i

     class

    =

    "fa fa-{{ icon }}"

    ></

    i

    >

    {{ btnName }}</

    button

    >
  22. </

    div

    >
  23. </

    div

    >
  24. </

    div

    >
  25. <script

     src

    =

    "app.js"

    ></

    script

    >
  26. </

    body

    >
  27. </

    html

    >

That ends this tutorial. Happy Coding :)


Download
You must upgrade your account or reply in the thread to view the hidden content.
 
You must log in or register to reply here.

452,496

330,760

330,768

S soulaemen2022
Top