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

Question

不要刻薄，因为我是 Angular 的新手。所以我的项目中有一个 bootstrap 下拉组件，我想根据单击的 link.

更改按钮的文本

在互联网上，我只遇到过 JQuery implementation。

那么有人知道如何在 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;
  }
});

Answer 2

您使用自定义指令，因为指令是 make once use any where:

这是指令名称：dropdown-text-set

要求此指令仅 ID 名称：angular_menu_item

restrict : "A",
link : function(scope, ele, attr)
{
  var dropdown_item = angular.element(document.getElementById("angular_menu_item")).children();
  for(var i = 0; i<dropdown_item.length; i++)       {
    dropdown_item.eq(i).bind("click", function($event){

      ele.html($event.target.innerHTML+'<span class="caret">');
    });
  }
}

看这个例子http://codepen.io/anon/pen/BoYjqy