单击按钮后，在Angular中隐藏按钮并显示数据

mrb398 发表于 Dev

mrb398

不用说，我在尝试完成一个相对简单的任务时对角刚入门还很陌生，我来这里寻求帮助

我正在使用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（）方法可以工作并返回正确的密码，但是我不知道如何隐藏按钮并显示密码。

史蒂夫·米切姆（Steve Mitcham）

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