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

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

1 个答案: