将“活动”类应用于移动设备上的选项卡，而不是桌面

Question

我目前正在开发一个 Web 项目，您可以在其中选择使用 Bootstrap 和 Angularjs 在两个选项卡之间切换。基本上我希望它在桌面上将网格默认为活动状态，然后在移动设备上将列表默认为活动状态。

<div class="col-sm-2">
    <div class="course-view-section">
        <ul class="nav nav-tabs course-view-tab">
            <li class="active"><a data-toggle="tab" href="" class="course-view-btn btn btn-default course-view-btn" ng-click="selected = selection.grid"><i class="fa fa-th"></i> Grid</a></li>
            <li><a data-toggle="tab" href="" class="course-view-btn btn btn-default course-view-btn" ng-click="selected = selection.list"><i class="fa fa-list"></i> List</a></li>
        </ul>
    </div>
</div>

角度

<div class="content" ng-switch="selection">
     <div ng-if="selected === selection.grid">
         <ng-include src="'/Content/template/course/grid-view.html'"></ng-include>
     </div>
     <div ng-if="selected === selection.list">
        <ng-include src="'/Content/template/course/list-view.html'"></ng-include>
     </div>
</div>

我玩过媒体查询、ng-class 等，但无法按预期工作。以前有人想出这个吗？

Answer 1

尝试在页面加载时设置selected 的状态。你如何做到这一点在很大程度上取决于你如何构建应用程序的其余部分。例如，如果 $scope 正在初始化，那么在控制器中可能与此类似：

$scope.init = function () {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
     $scope.selected = selection.list
   } else {
     $scope.selected = selection.grid
   }
}