如何在Angular中的Bootstrap下拉标题上显示所选项？ [英] How to display the selected Item on Bootstrap Dropdown Title in Angular?

问题描述

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

Don't be mean because I'm new to Angular. So I have a bootstrap Dropdown component in my project and I would like to change the text of the button depending on the clicked link.

在互联网上，我只是遇到JQuery 实施。

On the internet, I've only come across JQuery implementation.

所以谁知道如何在Angularjs做到这一点？在此先感谢。

So does anyone know how to do this in Angularjs? Thanks in advance.

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) {

});

推荐答案

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

Considering you have the basic data binding knowledge on Angularjs. Try this http://codepen.io/anon/pen/pjagZR. If you don't understand something from here feel free to ask.

<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;
  }
});

这篇关于如何在Angular中的Bootstrap下拉标题上显示所选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！