Скрыть кнопку и показать данные, щелкнув по кнопке, в Angular

Question

Возможно, я, конечно же, совершенно новичок в вопросе, поскольку я пытаюсь выполнить относительно простую задачу, и я пришел сюда для некоторой помощи

Я воссоздаю свод паролей нашей компании, используя угловые.

Вот что я пытаюсь выполнить.

Страница загружается со списком счетов. Большая часть информации видна, за исключением пароля. У меня есть кнопка, которая при нажатии, скрывает кнопку, запрашивает базу данных, журналы, которые запрашивают пароль, и отображает пароль для пользователя. Пароли являются четким текстом, поскольку они не являются паролями для учетных записей клиентов или чего-то чувствительного, поэтому для наших сотрудников существует возможность указывать, как и где вы можете входить на различные сайты, которые мы используем для повседневного бизнеса.

Мой 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

Используя нг-шоу и нг-скрытие директивы против пароля на объект учетной записи должен быть достаточен для модификации пользовательского интерфейса

<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

Вы можете сделать это, либо нг-если или нг-показать/скрыть:

Быстрый образец ниже:

<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>