使用bootstrap，列表active不能动态生成

Question

这是我的html代码

 <div class="row">
              <div class="col-md-12">
                  <ul id="myVideoTab" class="nav nav-tabs nav-justified courseClassNavbar">
                      <li ng-repeat="superItem2 in superCourse"
                          class="dropdown courseClassMenu superCourse{{superItem2.id}}"
                          ng-class="{active:superItem2.id == superID}"
                          ng-click="getSubCourse(superItem2.id)">
                          <a id="course{{superItem2.id}}"
                             href="#"
                             class="dropdown-toggle"
                             data-toggle="dropdown">
                              <span ng-bind="superItem2.name"></span>
                              <b class="caret"></b>
                          </a>
                          <ul class="dropdown-menu" role="menu"
                              id="mySubCourseTab"
                              aria-labelledby="course{{superItem2.id}}">
                              <li class="subCourse"
                                  ng-repeat="subItem in subCourse"
                                  ng-class="{active:subItem.id == subID}"
                                  ng-click="getVideo(subItem.id)">
                                  <a href=".subCourse{{subItem.id}}"
                                     tabindex="-1"
                                     data-toggle="tab">
                                      <span ng-bind="subItem.name"></span>
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </div>
          </div>
          <div class="row">
              <div class="col-md-12">
                  <div id="myTabContent" class="tab-content">
                      <div ng-repeat="sub in subCourse"
                          class=" tab-pane fade in subCourse{{sub.id}} videoList"
                          ng-class="{ active: sub.id == subID}">
                          <ul>
                              <li ng-repeat="videoLib in video" class="videoShow">
                                  <a href="tmpls/player.html?videoID={{videoLib.id}}">
                                      <img ng-src="{{videoLib.picture}}" class="videoImg">
                                  </a>
                                  <a href="tmpls/player.html?videoID={{videoLib.id}}">
                                      <span class="font6" ng-bind="videoLib.name"></span>

                                  </a>
                                  <span class="videoDetail" ng-bind="videoLib.detail"></span>
                              </li>
                          </ul>
                          <div ng-if="video == ''" class="videoNull">
                          暂无视频
                          </div>
                      </div>
                  </div>
              </div>
          </div>
    </div>
</div>

这是我的controller.js代码

    $scope.superID = 1;
    $scope.subID = 5;
     $http.get('getRootCourse')
            .success(function (response) {
                $scope.superCourse = response.rootCourse;
                $('.courseClassMenu').bind($scope.getSubCourse(1));
                $('.subCourse').bind($scope.getVideo(5));
                //原来的位置
            });
        $scope.getSubCourse = function (id) {
            $.ajax({
                url: 'getSonCourse',
                async: false,
                type: "POST",
                data: {rootCourseID: id},
                success: function (response) {
                    if (response != null) {
                        $scope.subCourse = response.sonCourse;
                    }
                }
            });
        };
        $scope.getVideo = function (id) {
            $scope.video = null;
            $.ajax({
                        url: 'getVideoByCourseID',
                        async: false,
                        type: "POST",
                        data:  {courseID:id},
                        success: function (response) {
                                if(response != null) {
                                    $scope.video = response.videos;
                                }
                        }
                    });
        };

每次运行的时候只有第一个元素和第一个字元素有active，其余的都没有。

Answer 1

ng-class="{ 'active ' : superItem2.id == superID }"