angularjs – 如何分辨在Angular-UI中选择哪个引导选项卡

前端之家收集整理的这篇文章主要介绍了angularjs – 如何分辨在Angular-UI中选择哪个引导选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法告诉哪个选项卡在 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

猜你在找的Angularjs相关文章