Question

我使用angular + bootstrap创建一个表，每行都会有一个弹出按钮。我想要做的是改变显示密码＆＃39;隐藏密码＆＃39;显示弹出窗口时，弹出窗口关闭时返回。

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

我尝试使用＆＃39;等显示的行？＆＃34;显示密码＆＃34;：＆＃34;隐藏密码＆＃34;＆＃39;但我找不到切换显示的适当位置＆＃39;。我无法找到uib-popover的内置功能。请帮忙。谢谢！

Answer 1

每次点击按钮时，您都可以使用ng-click来切换变量，并相应地更改文字。

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

＆＃13;

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

＆＃13;

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

＆＃13;

很好的方式来切换bootstrap popover的文本？

1 个答案: