CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrapangular-ui-bootstrap
mautrok
mautrok

Reputation: 961

change type password style to none with angular

I have a doubt, I'd like to put in my application a check box, to show or hide the text of a password's input

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 need to bind a function on show, that changes the style of the password field, or the type. Searching around i find some topics where people discusses about the fact that it's not possible to change the type, so the only way that i imagine is to change the style of the field, is there any way to change the style of a password to a 'none' style?
EDIT
Even if i have used the solution proposed by Alex, and i have to say that it' work, i have tried to use a bind on the type in that way

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 explorer and on firefox, strangely on chrome and opera, when i expect to have text, the field changes the disc to square, any idea why?

Upvotes: 1

Views: 1423

Answers (2)

Alex Choroshin
Alex Choroshin

Reputation: 6187

You can use a simple magic of show and hide.

Example:

<input ng-show="show" type="text" ng-model="password">
<input ng-hide="show" type="password" ng-model="password">
<input type="checkbox" ng-model="show" ng-checked="false">

Live example: http://jsfiddle.net/choroshin/694f7/1/

Upvotes: 1

Jayram
Jayram

Reputation: 19578

You can not do it dynamically as IE does not allow it and it does not serve the purpose of cross browser compatibility. Now if you really want to do it. Use Show / Hide feature of angularjs to make it done. Show the one if the checkbox is checked else show the other one.

Upvotes: 0

Related Questions