切换 bootstrap 弹出框文本的好方法？

Question

我正在使用 angular + bootstrap 创建一个 table 并且对于每一行，它都有一个弹出按钮。我想要做的是在显示弹出窗口时将 'Show Password' 更改为 'Hide Password'，并在弹出窗口关闭时更改回来。

                    <tr ng-repeat="entry in data">
                        <td>{{ entry.site }}</td>
                        <td>{{ entry.username }}</td>
                        <td>
                            <button popover-placement="right" uib-popover="{{calculatePassword(entry)}}" class="btn btn-primary btn-sm">Show Password</button>
                        </td>
                    </tr>

我尝试使用 'displayed? "Show Password":"Hide Password"' 之类的行，但找不到合适的位置来切换 'displayed'。我也找不到 uib-popover 的内置功能来做到这一点。请帮忙。谢谢！

Answer 1

您可以使用 ng-click 在每次单击按钮时切换变量并相应地更改文本。

<button ng-click="entry.passwordDisplayed = !entry.passwordDisplayed">
  {{entry.passwordDisplayed ? 'Hide' : 'Show'}} Password
</button>

var app = angular.module("app", ["ui.bootstrap"]);

app.controller("controller", function($scope, $sce) {
  $scope.data = [
    {
      site: "Facebook",
      username: "jsmith",
      password: "abc123"
    }
  ];
  
  var trusted = {};
  
  $scope.htmlPopover = function(entry) {
    var html = '<b>Password:</b> ' + entry.password;
    return trusted[html] || (trusted[html] = $sce.trustAsHtml(html));
  };
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <div class="wrapper">
    <table class="table">
      <thead>
        <tr>
          <th>Site</th>
          <th>Password</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="entry in data">
          <td>{{ entry.site }}</td>
          <td>{{ entry.username }}</td>
          <td>
            <button ng-click="entry.passwordDisplayed = !entry.passwordDisplayed" class="btn btn-primary btn-sm" uib-popover-html="htmlPopover(entry)" class="btn btn-default">{{entry.passwordDisplayed ? 'Hide' : 'Show'}} Password</button>    
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

切换 bootstrap 弹出框文本的好方法？

Decent way to toggle the text of bootstrap popover?

angularjs

angular-ui-bootstrap