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

【问题标题】：using Angular Strap, not able to popover the selection menu?使用 Angular Strap，无法弹出选择菜单？
【发布时间】：2017-01-25 11:17:54
【问题描述】：

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

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

提前致谢

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angularjs-directive angular-strap

【解决方案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>

【讨论】：

不是下拉菜单。我们如何才能弹出选择项目的菜单？