How can we make show/hide password input in angular js with bootstrap 3?

Question

I want to make show/hide password input in angularjs with Bootstrap 3.

The toggle option needs to be inside the input.

Can you provide a snippet or example on that.

Thanks a million.

Answer 1

AngularJS / UI Bootstrap Solution

• Use Bootstrap's has-feedback class to show an icon inside the input field.
• Make sure the icon has style="cursor: pointer; pointer-events: all;"
• Use ng-if to show/hide different forms where the <label type="password"> vs <label type="text">

HTML

<!-- index.html snippet -->    

<!-- show password as type="password" -->
<div ng-if="!showPassword"
       class="form-group has-feedback">
    <label>password</label>
    <input type="password"
           ng-model="params.password"
           class="form-control"
           placeholder="type something here...">
    <span ng-if="params.password"
          ng-click="toggleShowPassword()"
          class="glyphicon glyphicon-eye-open form-control-feedback" 
          style="cursor: pointer; pointer-events: all;">
    </span>
  </div>

  <!-- show password as type="text" -->
  <div ng-if="showPassword"
       class="form-group has-feedback">
    <label>password</label>
    <input type="text"
           ng-model="params.password"
           class="form-control"
           placeholder="type something here...">
    <span ng-if="params.password"
          ng-click="toggleShowPassword()"
          class="glyphicon glyphicon-eye-close form-control-feedback" 
          style="cursor: pointer; pointer-events: all;">
    </span>
  </div>

JavaScript

// app.js

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
    $scope.params = {};
    $scope.showPassword = false;
    $scope.toggleShowPassword = function() {
        $scope.showPassword = !$scope.showPassword;
    }
});

Give it as spin with the plunker: http://plnkr.co/edit/oCEfTa?p=preview

Answer 2

You can dynamically change the input type with the ng-attr-type directive. For example:

<input ng-attr-type="{{ showPassword ? 'text' : 'password' }}">

you can tie the showPassword to the click event and make it toggle.

Update (from @Ferie's comment):

HTML

<span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password"> 

In the Angular Controller

$scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };

Answer 3

you can simply do

<input ng-show="showpassword" type="text" ng-model="password">
<input ng-hide="showpassword" type="password" ng-model="password">
<input type="checkbox" ng-model="showpassword" ng-checked="false">

read here