javascript - 在 Angular 中单击按钮时隐藏按钮并显示数据

Question

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

我正在使用 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>

我的示波器 Controller 如下所示

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

我的 showPassword() 方法可以工作并返回正确的密码，但我不知道如何隐藏按钮并显示密码。

Answer 1

对帐户对象上的密码使用 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>

对于promise解析，你希望getAccountPassword返回一个promise，我将在下面对其内容进行假设

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
    });
 }

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