angular js with bootstrap 3でパスワード入力を表示/非表示にします。トグルオプションは入力内にある必要があります。スニペットまたはその例。百万に感謝します。
Ng-attr-typeディレクティブを使用して、入力タイプを動的に変更できます。例えば:
<input ng-attr-type="{{ showPassword ? 'text' : 'password' }}">
showPasswordをクリックイベントに関連付けてトグルさせることができます。
@ Ferieのコメントからの更新:
HTML
<span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password">
Angular Controller
$scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };
AngularJS/UI Bootstrap Solution
style="cursor: pointer; pointer-events: all;"
が付いていることを確認してくださいng-if
を使用して、<label type="password">
対<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;
}
});
プランカーでスピンとして与えます: http://plnkr.co/edit/oCEfTa?p=preview
これが実際のデモです:
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>
あなたは単にできる
<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">
読み取り ここ
これも試してみてください
<input type="{{showPassword?'text':'password'}}" />
<input type="checkbox" title="Show Password" ng-model="showPassword" ng-checked="showPassword">
ユニークな入力を使用して、次のように彼のタイプを切り替えます。
<input type="{{inputType}}" placeholder="Put your password" />
コントローラ
// 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';
};
入力ボックスを非表示にするか、パスワードを表示/非表示にしますか?
これが今までやってきたことです
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;
}
<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";
}
}
});
あなたはこのワン聖霊降臨祭のアイコンを試してみてください
<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>
シンプルでスマートな方法は
<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>