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

Question

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

在网上，我只遇到过 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 一次在任何地方使用：

这是指令名称：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