Learner Learner - 5 months ago 71
AngularJS Question

Unmask Password to plain text and again mask it upon clicking a checkbox

I have a password type input element in html5 as follows in my angular mvc based app.

I am having a requirement to have a checkbox near to this, and when the user clicks on the chekcbox, we display the masked password text as plain text in the same password input type textbox which is below code. And again, when the user deselect the checkbox, we should mask the plain text to mask :) Looks like it is simple, I am new here, could someone please help me with possible code

<input type="password" name="password"
ng-model="model.password"
placeholder="Please type your password">

Answer

You can simply use ng-show or ng-if directive for your case.

By the following snippet the input with different type will toggle on the dom.

<input type="password" name="password"
                               ng-model="model.password"
                               placeholder="Please type your password"
                               ng-show="!showPassword">

<input type="text" name="password"
                               ng-model="model.password"
                               ng-show="showPassword">

<input type="checkbox" ng-model="showPassword">

Working Fiddle

Hope it helps.

Comments