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.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez modifier dynamiquement le type d'entrée avec la ng-attr-type de directive. Par exemple:
vous pouvez lier les showPassword à l'événement click et le faire basculer.
Mise à jour (à partir de @Ferie commentaire):
HTML
Dans l'angle de Contrôleur de
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.<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; };
AngularJS /UI Bootstrap Solution
style="cursor: pointer; pointer-events: all;"
ng-if
pour afficher/masquer les différentes formes où la<label type="password">
vs<label type="text">
HTML
JavaScript
Donner comme spin avec le plunker: http://plnkr.co/edit/oCEfTa?p=preview
$scope.params.password
est défini par angulaire dung-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.vous pouvez simplement faire
lire ici
Voici un travail de démonstration:
JS:
HTML:
Vous pouvez également essayer celui-ci
À l'aide d'une entrée unique et de basculer son type comme ceci:
Contrôleur
http://codepen.io/gymbry/pen/fJchw/
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
CSS :
http://plnkr.co/edit/TfKvlh1mM6wsNrPQKY4Q?p=preview
La simple et de la façon intelligente est
App.contrôleur('myCtrl', function ($champ) {
$champ d'application.passwordType = "mot de passe";
vous devriez essayer de le ce d'un brin d'oeil icônes