Question

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

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

所以有人知道如何在Angularjs中这样做吗？提前谢谢。

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有基本的数据绑定知识。试试这个here。如果您对此不了解，请随时提出。

<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

您使用自定义指令，因为指令在以下任何地方使用：

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

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

2 个答案: