Question

// test.js

$scope.popover = {
  "title": "Title",
  "content": "<select ><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>"
};

// index.html

<button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" data-html="true" bs-popover ="popover">Click to toggle popover
      <br>
      <small>(using an object)</small>
    </button>

我正在按钮。我无法获得菜单项。如何弹出选择菜单？点击菜单项时点击发出一些警告。

先谢谢

Answer 1

使用uib-popover-html属性。请尝试以下。

<html ng-app="demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">
    <h4>Dynamic</h4>
    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" popover-placement="right" class="btn btn-default">Popover With Template</button>
  
  <button uib-popover-html="htmlPopover" popover-title="Choose" popover-placement="right" class="btn btn-default">HTML Popover</button>

    <script type="text/ng-template" id="myPopove.html">
        <div>{{dynamicPopover.content}}</div>
        <div class="form-group">
          <select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>
        </div>
    </script>
   
</div>
     <script>angular.module('demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
  $scope.htmlPopover = $sce.trustAsHtml('<select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>');
  $scope.dynamicPopover = {
    content: 'Choose car',
    templateUrl: 'myPopove.html',
    title: 'Car list'
  };  
  
});</script>
  </body>
</html>

使用Angular Strap，无法弹出选择菜单？

1 个答案: