如何在Angular中的Bootstrap下拉标题上显示所选项？

Question

不要吝啬,因为我是Angular的新手.所以我的项目中有一个bootstrap Dropdown组件,我想根据点击的链接更改按钮的文本.

在互联网上,我只遇到过JQuery 实现.

那么有谁知道如何在Angularjs做到这一点？提前致谢.

Codepen沙箱

HTML

<div ng-app='myApp'>
  <div ng-controller='DropdownCtrl'>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a></li>
      </ul>
    </div>

  </div>
</div>

JS

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

});

Answer 1

考虑到你对Angularjs有基本的数据绑定知识.试试这个http://codepen.io/anon/pen/pjagZR.如果您对此不了解,请随时提出.

<div ng-app='myApp'>
<div ng-controller='DropdownCtrl'>

<div class="btn-group" uib-dropdown is-open="status.isopen">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
    {{button}} <span class="caret"></span>
  </button>
  <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
    <li role="menuitem">
      <a href="#" ng-click="change(action)" ng-repeat="action in actions">{{action}}</a>
    </li>
  </ul>
</div>

</div>
</div>

JS

angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function($scope) {
  $scope.button = "Button dropdown";
  $scope.actions = [
    "Action", "Another Action", "Something else here"
  ];

  $scope.change = function(name){
    $scope.button = name;
  }
});