如何从作用域将活动选项卡绑定到数组的最后一个元素
如何从作用域将活动选项卡绑定到数组的最后一个元素
提问于 2019-05-20 11:57:05
我正在尝试将uib-tabset设置为数组的最后一个元素。然而，当我这样做的时候，uib-tabset要疯狂了，它会删除它自己的选项卡。我不想为active uib-tabset拥有一个范围字段，我想使用数组长度来标识哪个选项卡应该是活动的。有可能吗？
<uib-tabset active="tabs.length">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}"
disable="tab.disabled">
{{tab.content}}
</uib-tab>
</uib-tabset>会导致意外的结果，比如删除自己的选项卡。完整示例：https://plnkr.co/edit/JJ0k8LtRPXqXKrjEM0bn?p=preview尝试单击第一个选项卡。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-20 13:01:11
由于我们需要激活最后一个选项卡，所以我们可以对其使用ng-init。请仔细看一下代码，希望它对你有用。
<uib-tabset ng-init="active=tabs.length" active="active">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}"
disable="tab.disabled">
{{tab.content}}
</uib-tab>
</uib-tabset>Stack Overflow用户
发布于 2019-05-20 12:23:41
我不知道为什么，但在控制器中保存标签的长度似乎对我有用。希望能帮上忙。检查一下。
https://plnkr.co/edit/TrnOOFBSPFfIzcYRnOW7?p=preview
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
{ title:'Dynamic Title 2', content:'Dynamic content 2' },
{ title:'Dynamic Title 3', content:'Dynamic content 3' },
];
$scope.tabslenght = $scope.tabs.length;
$scope.model = {
name: 'Tabs'
};
});<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style type="text/css">
form.tab-form-demo .tab-pane {
margin: 20px 20px;
}
</style>
<div ng-controller="TabsDemoCtrl">
<uib-tabset active="tabslenght">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}"
disable="tab.disabled">
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Stack Overflow用户
发布于 2019-05-20 12:37:11
如果您不想为制表符长度设置另一个作用域变量，这个技巧应该适用于您：
<uib-tabset ng-init="len = tabs.length" active="len">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56220562
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号