angular在遍历数组之后如何给第一个元素加默认？

Question

<div class="row">
          <div class="col-md-12">
              <nav class="navbar courseClassNavbar" role="navigation">
                  <div>
                      <ul id="myTab" class="nav nav-justified">
                          <li ng-repeat="item in courseClass"
                              class="courseClassMenu"
                              style="background-color: transparent"
                              ng-click="getVideo()">
                              <a href=".course{{item.id}}" data-toggle="tab"
                                 ng-bind="item.name">
                              </a>
                          </li>
                      </ul>
                  </div>
              </nav>

          </div>
      </div>
          <div class="row">
              <div class="col-md-12">

                  <div id="myTabContent" class="tab-content">
                      <div ng-repeat="i in courseClass"
                           class=" tab-pane fade in course{{i.id}} videoList">
                          <span ng-if="video == null" style="display:block;margin: auto">
                              暂无视频
                          </span>
                          <ul>
                              <li ng-repeat="item2 in video" class="videoShow">
                                  <img ng-src="{{item2.picture}}" class="videoImg">
                                  <span class="font6" ng-bind="item2.name"></span>
                                  <span class="font6" ng-bind="item2.detail"></span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div> 

 $scope.getVideo = function () {
            $scope.video = null;
            $.ajax({
                        url: 'getVideoByCourseID',
                        async: false,
                        type: "POST",
                        data:  {courseID:this.item.id},
                        success: function (response) {
                                if(response != null) {
                                    $scope.video = response.videos;
                                }
                        }
                    });
        };

如何一进页面不用点击就让第一个的数据显示？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使第一个元素显示，你可以使用ng-class属性来设置CSS类。首先，在你的HTML中添加一个类到第一个元素：

<div class="courseClassMenu" style="background-color: transparent" ng-click="getVideo()">...</div>

然后，在你的JavaScript中，你可以在循环开始时为第一个元素应用这个类：

// 在你的JavaScript文件中...
scope.$watch('courseClass', function() {
    scope.courseClass.forEach(function(item, index) {
        // 如果这是第一个元素
        if(index === 0) {
            item.classList.add('first-item');
        }
    });
});

这样，当你进入页面时，第一个元素就会有first-item类，从而使其在DOM中显式地突出显示。

请注意，我在这里使用的JavaScript forEach方法是基于ES5标准的，如果你正在使用的是更现代的ES6或更高版本，请考虑使用Array.prototype.forEach代替它。