Angular Js中的引导选项卡不起作用

Question

我正在创建一个有角度的 js 应用程序。它有一个侧边栏导航系统。当我单击侧边栏项目时，它必须在内容部分的该项目下显示内容，我正在使用引导程序 看我写的代码

HTML

 <div class="sidebar">
            <ul>
                <li ng-repeat="item in supplyItem">
                    <a class="span" href="#{{item.header}}">{{item.header}}</a>
                </li>
            </ul>
       </div>
       <div class="content-part">

              <div class="tab-content">
            <div class="tab-pane" ng-repeat="item in supplyItem" id="{{item.header}}">
                {{item.desc}}                
            </div>
        </div>

JS

myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
    when('/home',{
        templateUrl : 'partials/home_page.aspx',
        controller:'HomePageController',
    }).
    when('/supplies',{
        templateUrl : 'partials/supplies.aspx',
        controller:'MyController',
    }).

    otherwise({
        redirectTo: '/home'
    });


}]);

    appController.controller('MyController', ['$scope', function ($scope) {

        $scope.supplyItem = [
        {
            "header": "header1",
            "desc": "Descipriotn 1"
        },
        {

            "header": "header2",
            "desc": "Descipriotn 2"

        }
        ];

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

            $(function () {
                $('.sidebar a:last').tab('show');
            });
    } ]);

但是当我点击侧边栏导航项时，它会转到我在 routeProvider.otherwise()

中提到的主页

什么是错误，我该如何解决？请任何人帮助我

Answer 1

我认为你应该让你的 Tap-pane div 的 id 不同：

id="item.header" 应该是 id="{{item.header}}"

Answer 2

我还注意到在你的 JS 中你有：

$scope.supplyItem = [ { “标题”：“标题1”， "desc": "描述 1" }, { “标题”：“标题1”， "desc": "描述 2" } ];

而且我认为“header”值应该不同，以便引导插件区分不同的 div。