javascript - Angular Js 中的 Bootstrap 选项卡不起作用

Question

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

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}}"