twitter-bootstrap 如何在 Angular 的 Bootstrap 下拉标题上显示所选项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33278097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display the selected Item on Bootstrap Dropdown Title in Angular?
提问by Alex Shmatko
Don't be mean because I'm new to Angular. So I have a bootstrap Dropdown component in my project and I would like to change the text of the button depending on the clicked link.
不要刻薄，因为我是 Angular 的新手。所以我的项目中有一个 bootstrap Dropdown 组件，我想根据单击的链接更改按钮的文本。
On the internet, I've only come across JQuery implementation.
在互联网上，我只遇到过 JQuery实现。
So does anyone know how to do this in Angularjs? Thanks in advance.
那么有谁知道如何在 Angularjs 中做到这一点？提前致谢。
Codepensandbox
Codepen沙箱
HTML
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
JS
angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {
});
回答by Shuvro
Considering you have the basic data binding knowledge on Angularjs. Try this http://codepen.io/anon/pen/pjagZR. If you don't understand something from here feel free to ask.
考虑到您对 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
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;
}
});
回答by Sandeep
you use Custom Directive because directive is make once use any where:
您使用自定义指令是因为指令一旦在任何地方使用：
this is directive name : dropdown-text-set
这是指令名称：下拉文本集
required this directive only ID name : angular_menu_item
仅需要此指令 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">');
});
}
}
see this example http://codepen.io/anon/pen/BoYjqy
