如何（1）从 Angular/Bootstrap 下拉列表中获取选定的值和（2）显示选定的选项？答案

【问题标题】：How to (1) get selected value from Angular/Bootstrap dropdown and (2) show selected choice?如何（1）从 Angular/Bootstrap 下拉列表中获取选定的值和（2）显示选定的选项？
【发布时间】：2015-07-07 12:00:52
【问题描述】：

我正在尝试让 Angular-UI 下拉菜单工作： http://angular-ui.github.io/bootstrap

如何将值传递给我的 Angular 函数以便进行处理？
如何在用户选择后显示所选选项，而不是始终显示“请选择：”

Plunker： http://plnkr.co/edit/1Vz8T4NMi39JpdSdXgFd

HTML：

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

<div ng-controller="DropdownCtrl">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" 
          type="button" id="menu1" data-toggle="dropdown" ng-click="toggled">Please Select:
            <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
            <li role="presentation" ng-repeat="choice in items">
                <a role="menuitem" tabindex="-1" href="#">{{choice}}</a>
            </li>
        </ul>
    </div>
</div>

</body>
</html>

JavaScript：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {

    $scope.items = ['one','two','three','four'];

    $scope.toggled = function(value) {
        alert('the value you chose was ' + value)
    };

});

【问题讨论】：

标签： javascript angularjs twitter-bootstrap drop-down-menu

【解决方案1】：

对于带有 Bootstrap v4.0.0-alpha.6 的 Angular 4，以下是有关如何执行此操作的提示：

用于 Bootstrap 下拉控件的 HTML

       <div class="form-group row">
          <label class="col-md-3 form-control-label">Account</label>
          <div class="col-md-9">
            <div class="btn-group" dropdown>
              <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
                {{selectedValue}} <span class="caret"></span>
              </button>
              <ul dropdownMenu class="dropdown-menu" role="menu">
                <li *ngFor="let account of accounts" value="{{account._id}}" (click)="selectValue(account)"
                    class="dropdown-item">{{account.firstname}} {{account.lastname}}
                </li>
              </ul>
            </div>
          </div>
        </div>

JS 组件代码

export class UserFormComponent implements OnInit {
   selectedValue: string = '-- select value --';
   selectedId: string;

   // On-Click Method on dropdown control
   selectValue(account: Account) {
      this.selectedValue = account.firstname + ' ' + account.lastname;
      this.selectedId = account._id;
   }
}

【讨论】：

【解决方案2】：

在您的 HTML 中，修改与下拉列表相关的代码以添加绑定到下拉列表中显示的文本（通过ng-bind）+ 在单击下拉列表中的元素时执行一个函数（通过ng-click）：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" 
      type="button" id="menu1" data-toggle="dropdown" ng-click="toggled" ng-bind='selected'>Tutorials
        <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation" ng-repeat="choice in items">
            <a role="menuitem" ng-click="setTutorial(choice)" tabindex="-1" href="#">{{choice}}</a>
        </li>
    </ul>
</div>

然后在javascript中，添加这个函数，当点击下拉列表中的元素时执行：

$scope.selected = "Tutorial";
$scope.setTutorial = function(value) {
  $scope.selected = value;
}

使用此功能，您可以：
1. 获取被点击项的值
2. 更新选择的选项。

【讨论】：