Question

我是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';
  };

});

Answer 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

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

1 个答案: