隐藏按钮并在单击按钮时以 Angular 显示数据

Hide button and show data, upon button click, in Angular

本文关键字：按钮 Angular 显示 数据 单击 隐藏      更新时间：2023-09-26

不用说，我对 angular 很陌生，因为我正在尝试完成一项相对简单的任务，我来这里寻求一些帮助

我正在使用角度重新创建我们公司的密码库。

这就是我正在努力实现的目标。

页面加载时会显示帐户列表。除密码外，大多数信息都是可见的。我有一个按钮，单击该按钮时，隐藏按钮，查询数据库，记录查询密码的人，并向用户显示密码。密码是明文的，因为它们不是客户帐户或任何敏感密码，我们的员工可以参考如何/在哪里登录我们用于日常业务的各种网站。

我的 HTML 如下所示：

    <tr ng-repeat="account in resp.PasswordVaultAccounts">
        <td><a href="{{account.URL}}" target="_blank">{{account.Name}}</a></td>
        <td>{{account.Username}}</td>
        <td><button ng-click="showPassword(account.AccountId);" class="btn btn-primary">View</button><span></span></td>
        <td>{{account.Comments}}</td>
    </tr>

我的示波器控制器如下所示

$scope.showPassword = function (accountId) {
        passwordVaultData.getAccountPassword(accountId)
            .$promise
            .then(function (r) {
                   //success
            }, function (r) {
                  //fail
            });
    }

我的 showPassword（） 方法有效并返回正确的密码，但我无法弄清楚如何隐藏按钮并显示密码。

对帐户对象上的密码使用 ng-show 和 ng-hide 指令应该足以修改 UI

<tr ng-repeat="account in resp.PasswordVaultAccounts">
    <td><a href="{{account.URL}}" target="_blank">{{account.Name}}</a></td>
    <td>{{account.Username}}</td>
    <td>
      <button ng-hide="account.Password" ng-click="showPassword(account.AccountId);" class="btn btn-primary">View</button>
      <span ng-show="account.Password">{{account.Password}}</span>
    </td>
    <td>{{account.Comments}}</td>
</tr>

至于承诺决议，您希望getAccountPassword返回承诺，我将在下面对其内容做出假设

function getAccountPassword(account) {
   var deferred = $q.defer();
   $http.get('api/vault/' + account.AccountId).then(function(r) {
      deferred.resolve(r);
   }, function(r) {
      deferred.reject(r);
   });
   return deferred.promise;
}
$scope.showPassword = function (account) {
    getAccountPassword(account.AccountId).then(function(password) {
      account.Password = password;
    }, function(password) {
      account.Password = undefined; // some type of error handling here
    });
 }

由于承诺是在$http调用的上下文中执行的，因此摘要周期将运行，并且将根据是否填充密码显示元素。

您可以通过 ng-if 或 ng-show/hide 来完成它：

快速示例如下：

 <tr ng-repeat="account in resp.PasswordVaultAccounts">
    <td><a href="{{account.URL}}" target="_blank">{{account.Name}}</a></td>
    <td>{{account.Username}}</td>
    <td>
       <button ng-if="!account.password" ng-click="showPassword(account);" class="btn btn-primary">View</button><span></span></td>
       <span ng-if="account.password">{{password}}</span>
    <td>{{account.Comments}}</td>
</tr>

$scope.showPassword = function (account) {
    account.password = passwordVaultData.getAccountPassword(account.AccountId)
        .$promise
        .then(function (r) {
               //success
        }, function (r) {
              //fail
        });
}

请看下面的演示

var app = angular.module('app', []);
angular.module('app').
controller('firstCtrl', function($scope) {
  $scope.resp = {
    PasswordVaultAccounts: [{
        AccountId: 1,
        URL: "bbc.co.uk",
        Username: "Jack",
        Comments: "White"
      }, {
        AccountId: 2,
        URL: "bbc.co.uk",
        Username: "Mike",
        Comments: "Green"
      }, {
        AccountId: 3,
        URL: "bbc.co.uk",
        Username: "Tim",
        Comments: "Red"
      }
    ]
  }
  $scope.showPassword = function(account) {
    //call you backend and on sucess add that :
    // passwordVaultData.getAccountPassword(account.accountId)
    //      .$promise
    //      .then(function (r) {
    account.showpass = true;
    account.pass = account.Username + " password is *****"
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="firstCtrl">
    <table>
      <tr ng-repeat="account in resp.PasswordVaultAccounts">
        <td><a href="{{account.URL}}" target="_blank">{{account.Name}}</a>
        </td>
        <td>{{account.Username}}</td>
        <td>
          <button ng-click="showPassword(account);" class="btn btn-primary" ng-hide="account.showpass">View</button>
          <span ng-show="account.showpass">{{account.pass}}</span>
        </td>
        <td>{{account.Comments}}</td>
      </tr>
    </table>
  </div>
</body>

相关文章：