I'm curious about something, I want to add a checkbox in my application that can toggle the visibility of the password input field.
HTML
<input type="text" ng-model="data.username" placeholder="username" value="username" class="form-control" popover="inserisci qui il tuo username" popover-trigger="focus" popover-placement="right"/><br>
<input id="pwd" type="password" ng-model="data.password" placeholder="password" value="password" class="form-control" popover="inserisci qua la tua password" popover-trigger="focus" popover-placement="right"/><br>
<input class="btn-primary btn-lg" type="submit" value="Login">
<button class="btn-warning btn-lg" type="button" ng-click="cancel()">CANCELLA</button>
<input ng-model="show" type="checkbox"><span>Show Password</span>
I am looking to implement a function on the show checkbox that changes the style or type of the password field. I've come across discussions where people mention that changing the type is not possible, so I'm considering changing the field's style as an option. Is there a way to change the style of a password field to 'none'?
EDIT
Although I tried Alex's solution and it worked, I attempted to bind the type in this manner
HTML
<input id="pwd" type="{{passwordtype}}" ng-model="data.password" placeholder="password" value="password" class="form-control" popover="inserisci qua la tua password" popover-trigger="focus" popover-placement="right"/><br>
<input ng-model='check' ng-change="show()" type="checkbox"><span>SHOW PASSWORD</span>
JS
$scope.check=false
$scope.show=function(){
if($scope.check==false){
$scope.check=true;
$scope.passwordtype='text'
}else{
$scope.check=false;
$scope.passwordtype='password'
}
}
It works on Internet Explorer and Firefox, but interestingly on Chrome and Opera, when I expect text, the field changes from a disc to a square. Any idea why?