Search code examples
angularjshtmlcsstwitter-bootstrap-3angular-ui-router

AngularJS load List.html or Grid.html based on user selection in NavBar

I am using AngularJS UI Layout to support resizable splitter. I need to implement List/Grid View for main html file. Such that based on the user selection of button List or Grid in Nav Bar, i have to layout the html file accordingly.

Is there a way to render different html files like List.html for list button selection and Grid.html for grid button selection??

In this case the model binding and UI displayed are same for List.html and Grid.html only the layouts change.

Attaching link to plunker : http://plnkr.co/edit/XYeRbERAWcgkmB5ecNob?p=preview

Any pointer??

List.html

<div id="products" class="row list-group">
  <div class="row">
    <div class="item col-sm-5 col-md-6">
      <div class="editor-container">
        <textarea ui-codemirror="{ onLoad : editorLoaded }" ng-model="sfsql" ng-trim="false"></textarea>
      </div>
    </div>
    <div class="item col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
      <div ng-controller="TableCtrl">
        <div id="tableId" ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav ui-grid-selection ui-grid-infinite-scroll class="grid">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="item col-sm-6 col-md-5 col-lg-6">
      <div class="viewer-container">
        <div class="error" ng-bind="results.error"></div>
        <textarea ui-codemirror="viewerOptions" ng-model="results.translation"></textarea>
      </div>
    </div>
    <div class="item col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
      <div class="viewer-container">
        <div class="error" ng-bind="results.error"></div>
        <textarea ui-codemirror="planViewerOptions" ng-model="results.plan"></textarea>
      </div>
    </div>
  </div>
</div>

Grid.html

<div class="wrap">
  <div ng-controller="uiLayoutCtrl" ui-layout on-resize="ResizeFn()">
    <div ui-layout="{flow : 'column'}" on-resize="ResizeFn()">
      <div class="editor-container">
        <div>
          <textarea ui-codemirror="{ onLoad : editorLoaded }" ng-model="text" ng-trim="false"></textarea>
        </div>
      </div>
      <div class="viewer-container">
        <div ng-controller="TableCtrl">
          <div id="tableId" ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ui-grid-infinite-scroll="10" class="grid">
            <div class="error" ng-bind="results.error"></div>
          </div>
        </div>
      </div>
    </div>
    <div ui-layout="{flow : 'column'}" on-resize="ResizeFn()">
      <div class="viewer-container">
        <div class="error" ng-bind="results.error"></div>
        <textarea ui-codemirror="viewerOptions" ng-model="results.translation"></textarea>
      </div>
      <div class="viewer-container">
        <div class="error" ng-bind="results.planError"></div>
        <textarea ui-codemirror="planViewerOptions" ng-model="results.plan"></textarea>
      </div>
    </div>
  </div>
</div>
Solution

  • Your buttons should change a value that your views can see. Then you can either ng-if or ng-hide/ng-show the view based on the value

    Here is a VERY simple demo https://plnkr.co/edit/o0JUWuDETAAeYMmreoR7?p=preview 

    <body ng-app="demo" ng-controller="topCtrl as top">
    <button ng-click="top.setGrid()">Grid</button>
    <button ng-click="top.setList()">List</button>
    <div ng-if="top.button == 'grid'" ng-include="'grid.html'"></div>
    <div ng-if="top.button == 'list'" ng-include="'list.html'"></div>
</body>