1

我正在使用带有 Angular ng-repeat 的 Bootstrap 选项卡。但是当我点击任何标签时它没有打开

<div id="content">
    <div class="wrap full">
<div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]">
    <ul class="nav nav-tabs">
    <li ng-repeat="name in names" ng-class="{active: $index == 0}">
      <a href="#tab{{$index + 1}}" data-toggle="tab">Week {{$index + 1}}</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="name in names" >
      <p>{{$index + 1}}</p>
    </div>
  </div>
</div>
</div>
</div>
4

3 回答 3

3

查看 AngularJS 的 UI Bootstrap：http: //angular-ui.github.io/bootstrap/

它包括所有 Bootstrap UI 元素的指令。

在您的应用程序中放置和注册这些将允许您定义这样的选项卡：<tab></tab>

检查文档以获取更多信息。

于 2013-07-14T05:17:05.837 回答
1

引导选项卡需要 javascript 才能加载它们

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

每个选项卡都需要单独激活

于 2013-07-14T05:09:53.233 回答
0

将 id 提供给 ul 元素，然后在脚本文件中调用 tab 方法。
演示 http://plnkr.co/edit/w0URah6KiiXrSwaRCxcJ?p=preview
HTML：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="appController">
    <h1>Hello Plunker!</h1>
    <div id="content">
      <div class="wrap full">
        <div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]">
          <ul class="nav nav-tabs" id="mytab">
            <li ng-repeat="name in names">
              <a href="#tab{{$index + 1}}" data-toggle="tab">Week {{$index + 1}}</a>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="name in names">
              <p>{{$index + 1}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

脚本文件

var app = angular.module('app', []);
app.controller('appController', function($scope){
   $('#mytab').tab('show');
  });
于 2013-07-14T05:24:46.383 回答