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

问题描述

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

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

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

Codepen 沙箱

HTML

<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">按钮下拉<span class="caret"></span><ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button"><li role="菜单项"><a href="#">动作</a><a href="#">另一个动作</a><a href="#">这里还有别的东西</a></li>

JS

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

解决方案

考虑到您具有 Angularjs 的基本数据绑定知识.试试这个 http://codepen.io/anon/pen/pjagZR.如果您不明白这里的某些内容，请随时提问.

<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><ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button"><li role="菜单项"><a href="#" ng-click="change(action)" ng-repeat="action in actions">{{action}}</a>

JS

angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function($scope) {$scope.button = "按钮下拉菜单";$scope.actions = [行动"，另一个行动"，这里还有别的东西"];$scope.change = 函数(名称){$scope.button = 名称；}});

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.

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

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

Codepen sandbox

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

});

解决方案

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屋！