CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Kermit Christmas
Kermit Christmas

Reputation: 123

Angular Show Password after click

I have an inventory page that also contains a password field. I would like to hide the password when the page is loaded, best would be to have points displayed **** and after click password is shown or a pop up.

JS

   var get_cert = function () {
        $http.get($scope.url.cert_list).then(
            function (response) {
                $scope.certs = response.data;
            }
        );
    }
    // execute get function
    get_cert();

HTML

<div class="panel panel-default">
    <table class="table table-striped valign_middle">
        <tr class="table_header">
            <td>Name</td>
            <td>Pass</td>
        </tr>
        <tr ng-repeat="cert in certs | filter:search | orderBy:['name']">
            <td>{{cert.name}}</td>
            <td>
                <button class="w3-btn w3-black w3-hover-green w3-ripple" ng-click="get_cert()">Show</button>
                 <span ng-show="get_cert()">{{cert.password}}</span>
            </td>

        </tr>
    </table>

Upvotes: 2

Views: 366

Answers (1)

Adrian
Adrian

Reputation: 8597

<button ng-show="!cert.showPw" class="w3-btn w3-black w3-hover-green w3-ripple" ng-click="cert.showPw = true">Show</button>
<span ng-show="cert.showPw">{{cert.password}}</span>

You can use ng-click to do cert.showPw = true, which will append a property called showPw (a boolean) to the object. Combined with ng-show, you can easily switch between the two.

This way you'll keep your controller free of any additional logic needed. You may include ng-click on the span which holds the password which will set showPw = false to switch it back to a button.

See my JSFiddle for full example.

Upvotes: 2

Related Questions