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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!