Question

我可能不言而喻，因为我试图完成一项相对简单的任务，所以我很有新意义，而且我来这里寻求帮助

我正在使用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（）方法有效并返回正确的密码，但我无法弄清楚如何隐藏按钮并显示密码。

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>

至于承诺解析，你希望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调用的上下文中执行的，所以将运行摘要周期，并根据是否填充密码显示元素。

Answer 2

您可以通过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
        });
}

Answer 3

请参阅下面的演示

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>

在Angular中单击按钮时隐藏按钮和显示数据

3 个答案: