如何判断在 Angular-UI 中选择了哪个引导选项卡 [英] How to tell which bootstrap tab is selected in Angular-UI
问题描述
在 Angular UI 中使用 Bootstrap 选项卡时,有没有办法判断选择了哪个选项卡?
我尝试观察窗格数组,但在切换选项卡时似乎没有更新.可以指定标签被选中时的回调函数吗?
更新代码示例.
代码非常遵循 Angular UI 引导页面中的示例.
标记:
<标签><pane ng-repeat="pane in panes" Heading="{{pane.title}}" active="pane.active"><div ng-include="pane.template"></div></窗格></tabs>
控制器:
var TabsCtrl = function ($scope) {$scope.panes = [{ title:"事件列表", template:"/path/to/template/events" },{ 标题:日历",模板:/path/to/template/calendar"}];};
实际上这很简单,因为每个 pane
都公开了支持 2 路数据绑定的 active
属性:
<pane ng-repeat="pane in panes" Heading="{{pane.title}}" active="pane.active">{{pane.content}}</窗格></tabs>
然后可以轻松找到活动标签,例如:
$scope.active = function() {返回 $scope.panes.filter(function(pane){返回窗格.active;})[0];};
这是一个有效的 plunk
Is there a way to tell which tab that has been selected when using the Bootstrap tabs in Angular UI?
I tried watching the panes array but it deosn't seem to be updated when switching tab. Can one specify a callback function when a tab is selected?
Update with code example.
The code very much follows the example from the Angular UI bootstrap page.
Markup:
<div ng-controller="TabsDemoCtrl">
<tabs>
<pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
<div ng-include="pane.template"></div>
</pane>
</tabs>
</div>
Controller:
var TabsCtrl = function ($scope) {
$scope.panes = [
{ title:"Events list", template:"/path/to/template/events" },
{ title:"Calendar", template:"/path/to/template/calendar" }
];
};
Actually this is really simple as each pane
exposes the active
attribute that supports 2-way data binding:
<tabs>
<pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
{{pane.content}}
</pane>
</tabs>
and then an active tab can be easily found, for example:
$scope.active = function() {
return $scope.panes.filter(function(pane){
return pane.active;
})[0];
};
Here is a working plunk
这篇关于如何判断在 Angular-UI 中选择了哪个引导选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!