![](/img/trans.png)
[英]How to display selected item with icons in Bootstrap dropdown title?
[英]How to display the selected Item on Bootstrap Dropdown Title in Angular?
不要吝啬,因为我是Angular的新手。 所以我的项目中有一个bootstrap Dropdown组件,我想根据点击的链接更改按钮的文本。
在互联网上,我只遇到过JQuery 实现 。
那么有谁知道如何在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) {
});
考虑到你对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">');
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.