angularjs – 如何分辨在Angular-UI中选择哪个引导选项卡
发布时间:2020-12-17 08:38:09 所属栏目:安全 来源:网络整理
导读:有没有办法告诉哪个选项卡在 Angular UI中使用Bootstrap选项卡时被选择? 我试图看着窗格数组,但它似乎在切换标签时更新。当选择选项卡时,是否可以指定回调函数? 使用代码示例更新。 代码非常遵循Angular UI引导页面的示例。 标记: div ng-controller="T
有没有办法告诉哪个选项卡在
Angular UI中使用Bootstrap选项卡时被选择?
我试图看着窗格数组,但它似乎在切换标签时更新。当选择选项卡时,是否可以指定回调函数? 使用代码示例更新。 代码非常遵循Angular UI引导页面的示例。 标记: <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> 控制器: var TabsCtrl = function ($scope) { $scope.panes = [ { title:"Events list",template:"/path/to/template/events" },{ title:"Calendar",template:"/path/to/template/calendar" } ]; };
实际上这很简单,因为每个窗格显示支持双向数据绑定的活动属性:
<tabs> <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active"> {{pane.content}} </pane> </tabs> 然后可以很容易地找到活动选项卡,例如: $scope.active = function() { return $scope.panes.filter(function(pane){ return pane.active; })[0]; }; 这里是一个工作plunk:http://plnkr.co/edit/fEvOtL?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |