0

I'm currently working on a web project where you have the option to switch between two tabs using Bootstrap and Angularjs. Basically I want it to default the grid to active on desktop, but then default the list to active on mobile.

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

The angular

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

I've played around with media queries, ng-class etc, but couldn't get it work as intended. Anyone figured this one out before?

theHussle
  • 321
  • 3
  • 17
  • It sounds like you are asking how to detect if your app is being run on a mobile device, which would be a duplicate of https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser – Pop-A-Stash Jun 13 '17 at 21:31

1 Answers1

1

Try setting the state of selected when the page loads. How you do this depends a lot on how you are structuring the rest of the app. For example, if $scope is being intialized then perhaps similar to this in the controller might work: 

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