Comment pouvons-nous faire afficher/masquer le mot de passe d'entrée en angular js avec bootstrap 3?

Je veux faire afficher/masquer le mot de passe d'entrée en angular js avec bootstrap 3, l'option de bascule doit être à l'intérieur de l'entrée. Pouvez-vous fournir un extrait de code ou un exemple sur ce point. Merci un million.

InformationsquelleAutor Karthik | 2015-03-24

30

Vous pouvez modifier dynamiquement le type d'entrée avec la ng-attr-type de directive. Par exemple:
```
<input ng-attr-type="{{ showPassword ? 'text' : 'password' }}">
```
vous pouvez lier les showPassword à l'événement click et le faire basculer.

Mise à jour (à partir de @Ferie commentaire):

HTML
```
<span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password"> 
```
Dans l'angle de Contrôleur de
```
$scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };
```
- pour être 100% valide en HTML, vous devez ajouter le type="password", mais au angulaire d'exécution, il sera remplacé. Juste un conseil pour quelqu'un qui a toute sorte de automatique HTML de validation de l'outillage.
- HTML <span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password"> Dans l'angle de Contrôleur $scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };
InformationsquelleAutor Jennifer Cui

AngularJS /UI Bootstrap Solution

Utiliser Bootstrap est a-commentaires classe pour afficher une icône à l'intérieur du champ de saisie.
Assurez-vous que l'icône a style="cursor: pointer; pointer-events: all;"
Utilisation ng-if pour afficher/masquer les différentes formes où 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;
    }
});

Donner comme spin avec le plunker: http://plnkr.co/edit/oCEfTa?p=preview

Pourquoi ne u utiliser: $champ d'application.params = {}; ?
est juste un objet pour la tenue de variables. $scope.params.password est défini par angulaire du ng-model="params.password" dans le code html. Vous auriez probablement une connexion ou s'inscrire bouton qui déclenche une fonction qui permettrait d'accéder aux variables de $champ d'application.params.

InformationsquelleAutor Derek Soike

6

vous pouvez simplement faire
```
<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">
```
lire ici
- Je vous remercie pour votre réponse, j'ai essayé mais j'ai comme d'avoir ce que j'ai ajouté dans édités réponse comment faire à partir de ce.
- Pour compléter cette excellente réponse, voici le Bootstrap info demandé: getbootstrap.com/components/#input-groups Utiliser un input-group-addon.
InformationsquelleAutor harishr

Voici un travail de démonstration:

JS:

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

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

});

HTML:

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

InformationsquelleAutor Mangesh Bhapkar

Vous pouvez également essayer celui-ci

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

InformationsquelleAutor Satish Kumar sonker

À l'aide d'une entrée unique et de basculer son type comme ceci:

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

Contrôleur

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

InformationsquelleAutor Jose Echavez

Vous souhaitez que la zone de saisie pour cacher ou afficher/masquer le mot de passe?

Voici ce que j'ai fait jusqu'à maintenant

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

InformationsquelleAutor roxid

La simple et de la façon intelligente est

<div class="input-group">
  <input tabindex="2" type="password" class="form-control input-lg" ng-model="_password" placeholder="password" name="_password" required  ng-attr-type="{{ pwd_hide ? 'text':'password'}}">
  <span class="input-group-addon" ng-click="pwd_hide = !pwd_hide">{{ pwd_hide ? 'Hide':'Show'}}</span>
</div>
<span ng-show="submitted || loginForm._password.$dirty && loginForm._password.$invalid">
  <span ng-show="loginForm._password.$error.required" class="error">Please enter your password.</span>
</span>

InformationsquelleAutor Raja Rama Mohan Thavalam

<input class="form-control" type="{{passwordType}}" ng-model="User.Password" name="txtPassword" ng-class="submitted?'ng-dirty':''" autofocus required /><i style="position: relative;float: right;top: -26px;right: 3px; cursor:pointer" ng-click="showPassword()" class="ti ti-eye"></i>

App.contrôleur('myCtrl', function ($champ) {
$champ d'application.passwordType = "mot de passe";

$scope.showPassword = function () {

        if ($scope.passwordType == "password") {
            $scope.passwordType = "text";
        } else {
            $scope.passwordType = "password";
        }
    }
});

Bienvenue dans l'affirmative, veuillez décrire votre réponse et ne pas seulement poster le code source!

InformationsquelleAutor Haris Khurshid

vous devriez essayer de le ce d'un brin d'oeil icônes

<div class="col-md-6" ng-init="paninptype='password'; iconimg='/images/icons8-invisible-32.png';">
                            <label>PAN Number</label>
                            <div class="input-group">
                                <input type="{{paninptype}}" class="form-control" name="PAN" ng-model="vm.step1.model.PAN" id="exp-pan" placeholder="e.g. FARPS XXXX G" />
                                <span class="input-group-addon">
                                    <img src="{{iconimg}}" class="pull-right" style="width:38px" ng-click="paninptype=(paninptype=='password'?'text':'password'); iconimg=(paninptype=='password'?'/images/icons8-invisible-32.png':'/images/icons8-eye-50.png');">
                                </span>
                            </div>
                        </div>

InformationsquelleAutor vicky

Vous devez vous connecter pour publier un commentaire.