如何使用下拉按钮显示范围？答案

【问题标题】：How to display a scope using dropdown button?如何使用下拉按钮显示范围？
【发布时间】：2015-10-03 20:44:16
【问题描述】：

我是 Angular 的新手，所以请不要吝啬。我正在尝试根据下拉按钮中的单击选项显示一些文本，但我无法使其正常工作。那么它有什么问题呢？提前致谢。

HTML

<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">
    <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-default btn-xl" dropdown-toggle ng-disabled="disabled">
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#/" ng-click="show(first)">Display: First</a></li>
        <li role="menuitem"><a href="#/" ng-click="show(second)">Display: Second</a></li>
      </ul>
    </div>


<div id="separator"></div> 

<div class="col-md-12">
  {{show.first}}
  {{show.second}}
</div>

</div>
</div>

Javascript

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('DropdownCtrl', function ($scope) {

  $scope.show = function(scope) {
      $scope.first = 'First';
      $scope.second = 'Second';
  };

});

【问题讨论】：

你想在选择第一个时显示第一个，选择第二个时显示第二个，对吧？
@Arvaan 你是对的
你能看看这个stackoverflow.com/a/27810276/2435473

标签： javascript angularjs drop-down-menu angular-ui-bootstrap

【解决方案1】：

检查一下

控制器

var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('DropdownCtrl', function ($scope) {
  $scope.show = function(value) {
      console.log(value);
      $scope.data = value;  
  };
});

HTML：

<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">
    <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-default btn-xl" dropdown-toggle ng-disabled="disabled">
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#/" ng-click="show('first')">Display: First</a></li>
        <li role="menuitem"><a href="#/" ng-click="show('second')">Display: Second</a></li>
      </ul>
    </div>  
<div id="separator"></div> 

<div class="col-md-12">
  {{data}}
</div>     
</div>
</div>

Fiddle

【讨论】：