Jak możemy pokazać/ukryć wprowadzane hasło w Angular JS przy użyciu Bootstrap 3?

Możesz dynamicznie zmieniać typ danych wejściowych za pomocą dyrektywy ng-attr-type. Na przykład:

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

możesz powiązać showPassword ze zdarzeniem click i zmienić je.

Aktualizacja (na podstawie komentarza @ Ferie

) :
HTML

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

W kontrolerze Angular

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

Rozwiązanie AngularJS/UI Bootstrap

• Korzystanie z Bootstrap jest odwrotnie http://getbootstrap.com/css/%2 ... ationlink-class, aby wyświetlić ikonę w polu wejściowym.
• Upewnij się, że ikona ma

  style = "cursor: pointer; pointer-events: all;"

• Użyj

  ng-if

  , aby pokazać/ukryć różne formularze, w których

  & < label type = "password" & >

  kontra

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

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

 

JavaScript

// app.jsvar app = angular.module('plunker', ['ui.bootstrap']);app.controller('MainCtrl', function($scope) {

 $scope.params = {};

 $scope.showPassword = false;

 $scope.toggleShowPassword = function() {

 $scope.showPassword = !$scope.showPassword;

 }

});

Daj to jak plecy z tłokiem:

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

możesz po prostu zrobić

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

przeczytaj tutaj

Oto działające demo:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

var app = angular.module('myApp', []);

app.controller('loginCtrl', function($scope) {

 $scope.showPassword = false; $scope.toggleShowPassword = function() {

 $scope.showPassword = !$scope.showPassword;

 }});

<pre class="snippet-code-html lang-html prettyprint-override">

<link href="[url=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>

<script src="[url=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<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;"> </label>

</form>

Możesz także spróbować tego

<input type="{{showPassword?'text':'password'}}"/>

<input type="checkbox" title="Show Password" ng-model="showPassword" ng-checked="showPassword">

Korzystanie z unikalnego wejścia i przełączanie jego typu w następujący sposób:

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

Kontroler

// 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
http://codepen.io/gymbry/pen/fJchw/
/

Najłatwiejszy i najmądrzejszy sposób to

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

musisz wypróbować tę białą ikonę z jednym okiem

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

 

 

<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.controller ('myCtrl', function ($ scope) {
$scope.passwordType = "password";

$scope.showPassword = function () { if ($scope.passwordType == "password") {

 $scope.passwordType = "text";

 } else {

 $scope.passwordType = "password";

 }

 }

});

Czy chcesz, aby pole wejściowe było ukryte, czy pokazywało/ukrywało hasło?
Oto, co zrobiłem do tej pory
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>

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/TfKvlh1mM ... eview
http://plnkr.co/edit/TfKvlh1mM ... eview