Wie können wir Passworteingabe in angular js mit Bootstrap 3 anzeigen/verbergen?

Question

Ich möchte Passwort Eingabe in angular js mit Bootstrap 3 anzeigen/verbergen, muss die Toggle-Option innerhalb der Eingabe sein. Können Sie dazu einen Ausschnitt oder ein Beispiel bereitstellen? Tausend Dank.

Answer 1

Sie können einfach tun

<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"> 

here lesen

Answer 2

Sie wollen das Eingabefeld versteckt oder ein-/ausblenden Passwort werden? Hier

ist, was ich bisher getan

HTML

<div class="btn-group"> 
    <input ng-hide="hidevar" id="searchinput" type="password" class="form-control" placeholder="password" > 
     <span id="searchclear" ng-click="hideinpbox();">HIDE</span> 
</div> 

CSS:

#searchinput { 
    width: 200px; 
} 

#searchclear { 
    position:absolute; 
    right:5px; 
    top:0; 
    bottom:0; 
    height:14px; 
    margin-top:7px; 
    margin-right:5px; 
    font-size:14px; 
    cursor:pointer; 
    color:#ccc; 
} 

http://plnkr.co/edit/TfKvlh1mM6wsNrPQKY4Q?p=preview

Answer 3

eine einzigartige-Eingabe und wechseln seine Art wie folgt aus:

<input type="{{inputType}}" placeholder="Put your password" /> 

-Controller

// Set the default value of inputType 
    $scope.inputType = 'password';  
    // Hide & show password function 
    $scope.hideShowPassword = function(){ 
    if ($scope.inputType == 'password') 
     $scope.inputType = 'text'; 
    else 
     $scope.inputType = 'password'; 
    }; 

http://codepen.io/gymbry/pen/fJchw/

Answer 4

AngularJS/UI Bootstrap Lösung

• Verwenden has-feedback Klasse Bootstrap ein Symbol innerhalb des Eingabefeldes zu zeigen.
• Stellen Sie sicher, das Symbol style="cursor: pointer; pointer-events: all;" hat
• Verwendung ng-if zu zeigen/verschiedenen Formen verstecken, wo die <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

es als Spin Geben Sie mit dem Plunker: http://plnkr.co/edit/oCEfTa?p=preview

Answer 5

Sie dynamisch den Eingabetyp mit der ng-attr-Typ-Richtlinie ändern. Zum Beispiel:

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

können Sie die showPassword auf das Click-Ereignis binden und es wechselt machen.

Answer 6

Sie auch diese kann man versuchen

<input type="{{showPassword?'text':'password'}}" /> 
<input type="checkbox" title="Show Password" ng-model="showPassword" ng-checked="showPassword"> 

Answer 7

Hier ist eine Arbeits Demo:

var app = angular.module('myApp', []); 
 
app.controller('loginCtrl', function($scope) { 
 
    $scope.showPassword = false; 
 

 
    $scope.toggleShowPassword = function() { 
 
    $scope.showPassword = !$scope.showPassword; 
 
    } 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form name="form" ng-app="myApp" ng-controller="loginCtrl" novalidate> 
 
    <label> 
 
    Password: 
 

 
    <input type="password" name="password" ng-model="password" ng-attr-type="{{ showPassword ? 'text':'password'}}" /> 
 
    <div ng-click="toggleShowPassword()" ng-class="{'fa fa-eye': showPassword,'fa fa-eye-slash': !showPassword}" style="cursor: pointer;"></div> 
 

 
    </label> 
 
</form>