1

我正在尝试使其中一个选项卡处于活动状态（选项卡已经在模板中），具体取决于一些 url 参数。不幸的是，默认情况下它总是激活在 html 模板中找到的第一个，即使我在本例中使用 ng-repeat 也是如此。

这不起作用：

$scope.tabs = {
        title2: {active:false, content:"Hello world 2!"},
        title3: {active:false, content:"Hello world 3!"},
        title4: {active:false, content:"Hello world 4!"}
    }
    $scope.tabs.title4.active = true;

这是一个小提琴：http: //jsfiddle.net/alexrada/KFAXH/5/

4

2 回答 2

0

您需要在控制器中使用 $routeParams 服务并从中设置 $scope 活动值。这些方面的东西：

.controller('MyTabCtrl', function($scope, $routeParams) {
  $scope.tabs[$routeParams.active].active = true;
})

URL 的位置/?active=title4

您还需要设置您的 $routeProvider 服务。我会看看我是否可以让你的 JSFiddle 的一个分支在它再次可用时工作（它现在太慢了......）

于 2013-10-25T06:14:35.017 回答
0

问题已修复，您需要使用 ui.bootstrap 的基本概念 默认情况下第一个选项卡将处于活动状态

html代码：

<div ng-controller="MyTabCtrl">
    <tabset>
        <tab heading="title1">{{tabs.title1.content}}</tab>
        <tab heading="title2">{{tabs.title2.content}}</tab>
        <tab heading="title3">{{tabs.title3.content}}</tab>
    </tabset>
</div>

脚本代码

angular.module("myApp", ['ui.bootstrap']).
controller("MyTabCtrl", function($scope) {
    $scope.panes = [
        {title:"First", content:"Hello world!"},
        {title:"Second", content:"Bonjour monde!"},
        {title:"Second", content:"Bonjour monde!"}
    ];
    $scope.tabs = {
        title1: {content:"Hello world 1!"},
        title2: {content:"Hello world 2!"},
        title3: {content:"Hello world 3!"}
    }
  // $scope.tabs.active = true;
});

工作示例：http: //jsfiddle.net/KFAXH/28/

于 2017-04-10T07:32:00.910 回答