如何在Angular的引导下拉标题中显示选中的Item

别这么刻薄，因为我是Angular新手。所以我有一个bootstrap下拉组件在我的项目，我想改变按钮的文本取决于点击链接。

在网上，我只碰到过JQuery的实现。

有人知道如何在Angularjs中做到这一点吗?提前谢谢。

Codepen沙箱

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

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

考虑到你已经掌握了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; } });

你使用自定义指令，因为指令是一次使用任何地方:

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

相关内容

最新更新

热门标签：