Come possiamo rendere visibile/nascondi l'immissione della password in js angolari con bootstrap 3?

Question

Voglio rendere visibile/nascosto l'immissione della password in j angolari con bootstrap 3, l'opzione di commutazione deve essere all'interno dell'ingresso. Puoi fornire uno snippet o un esempio su questo. Grazie mille.

Answer 1

si può semplicemente fare

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

leggere here

Answer 2

Si desidera che la casella di input per essere nascosta o mostrare/nascondere la password?

Ecco quello che ho fatto fino ad ora

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

Utilizzando un ingresso unico e attivare o disattivare il suo tipo come questo:

La classe di

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

• Usa Bootstrap has-feedback per mostrare un'icona all'interno del campo di ingresso.
• Assicurarsi che l'icona ha style="cursor: pointer; pointer-events: all;"
• Usa ng-if per mostrare/nascondere diverse forme in cui la <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; 
    } 
}); 

dare come gli effetti della plunker: http://plnkr.co/edit/oCEfTa?p=preview

Answer 5

È possibile modificare dinamicamente il tipo di ingresso con la direttiva ng-attr-tipo. Ad esempio:

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

è possibile associare la showPassword all'evento click e renderla attiva.

Answer 6

Si può anche provare questo

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

Answer 7

Ecco una demo funzionante:

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>