How to make a list and grid view toggle switch control that loads in partials in AngularJS?

Question

I am new to AngularJS and I've been unable to find specific tutorials of a list and grid view toggle switch buttons that loads in two different HTML partials. Read official ng-include, ng-switch official docs and searched SO. Unfortunately, we don't want to use UI-router.

Is loading in two partials (list.html and grid.html) the correct Angular way of coding this?

---

The most relevant help I've found are these:

1.http://tutorialzine.com/2013/08/learn-angularjs-5-examples (Example #5)

There was an insightful comment on Example #5:

Nice simple examples - well done. The last example that switches between grid and list views is not very efficient since it creates both options and the shows/hides one. A simpler/better approach would be using a single ul with repeater and ng-switch and then enabling the alternate list elements using ng-switch-case. - Johan

2.http://www.adobe.com/devnet/html5/articles/getting-started-with-angularjs.html

3.https://stackoverflow.com/questions/12577378/create-a-single-html-view-for-multiple-partial-views-in-angularjs/12584774#12584774

4.https://stackoverflow.com/questions/15974086/conditional-ng-include-in-angularjs

---

My HTML code:

<div class="col-xs-6" ng-controller="ToggleDisplayCtrl">
  <div class="btn-group select-format-container" ng-switch on="selected">
    <button ng-switch-when="true" ng-click="toggleGrid()" type="button"
      class="btn btn-primary" ng-model="formatChoice" ng-disabled="">grid</button>
    <button ng-switch-when="false" ng-click="toggleList()" type="button"
      class="btn btn-primary" ng-model="formatChoice" ng-disabled="">list</button>
  </div>
  <div ng-include src="formatChoice.url" scope="" onload=""></div>
</div>
<!-- col-xs-6  END ToggleDisplayCtrl-->

My JS code:

'use strict';
var app = angular.module('tempApp');

app.controller('ToggleDisplayCtrl', function($scope) {
  $scope.formatChoices = [{
      name: 'grid',
      url: 'partials/grid.html'
    },
    {
      name: 'list',
      url: 'partials/list.html'
    }
  ];

  $scope.selected = true;
  $scope.toggleGrid = function() {
    if (selected) {
      return "partials/grid.html";
    }
    return "main.html";
  };
  $scope.toggleList = function() {
    if (selected) {
      return "partials/list.html";
    }
    return "main.html";
  };
});

Answer 1

The easiest way to do this is:

<div class="bar">
  <h1>Contacts</h1>
  <a href="#" class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
  <a href="#" class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
</div>
<div ng-show="layout == 'list'" class="list">
<!-- Add your list page here -->
<div ng-show="layout == 'grid'" class="grid">
<!-- Add your grid page here -->

CSS:

/*
  Contacts bar with toggle switches
*/

.bar {
  background-color: #5c9bb7;
  background-size: 100% 100%;
  box-shadow: 0 1px 1px #ccc;
  border-radius: 2px;
  height: 100px;
  padding: 10px;
  position: relative;
  text-align: right;
  line-height: 1;
}

.bar a {
  background: #4987a1 center center no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  text-decoration: none !important;
  margin-right: 5px;
  border-radius: 2px;
}

.bar a.active {
  background-color: #c14694;
}

.bar a.list-icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzNkFCQ0ZBMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzNkFCQ0ZCMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjM2QUJDRjgxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjM2QUJDRjkxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7h1bLqAAAAWUlEQVR42mL8////BwYGBn4GCACxBRlIAIxAA/4jaXoPEkMyjJ+A/g9MDJQBRhYg8RFqMwg8RJIUINYLFDmBUi+ADQAF1n8ofk9yIAy6WPg4GgtDMRYAAgwAdLYwLAoIwPgAAAAASUVORK5CYII=);
}

.bar a.grid-icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBEQkMyQzE0MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBEQkMyQzE1MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MERCQzJDMTIxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MERCQzJDMTMxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4MjPshAAAAXklEQVR42mL4////h/8I8B6IGaCYKHFGEMnAwCDIAAHvgZgRyiZKnImBQsACxB+hNoDAQyQ5osQZIT4gH1DsBZABH6AB8x/JaQzEig++WPiII7Rxio/GwmCIBYAAAwAwVIzMp1R0aQAAAABJRU5ErkJggg==);
}

/*-------------------------
  List layout
--------------------------*/

ul.list {
  list-style: none;
  width: 500px;
  margin: 0 auto;
  text-align: left;
}

ul.list li {
  border-bottom: 1px solid #ddd;
  padding: 10px;
  overflow: hidden;
}

ul.list li img {
  width: 120px;
  height: 120px;
  float: left;
  border: none;
}

ul.list li p {
  margin-left: 135px;
  font-weight: bold;
  color: #6e7a7f;
}

/*-------------------------
  Grid layout
--------------------------*/

ul.grid {
  list-style: none;
  width: 570px;
  margin: 0 auto;
  text-align: left;
}

ul.grid li {
  padding: 2px;
  float: left;
}

ul.grid li img {
  width: 280px;
  height: 280px;
  display: block;
  border: none;
}

Answer 2

Basically what you need to do is put a list view and grid same time on the same page and display one at a time, toggling between them (changing css class) with the switch button. I'll discuss the Example #5 here:

First layout variable in the scope:

$scope.layout = 'grid';

Here are the switch buttons:

<!-- On click change "$scope.layout = list" and if layout=='list' add class 'active' to self-->
<a href="#" class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>

<!-- On click change "$scope.layout = grid" and if layout=='grid' add class 'active' to self-->
<a href="#" class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>

These are the grid and list blocks:

<!-- Layout=='grid' if layout parameter is grid than show this block -->
<ul ng-show="layout == 'grid'" class="grid">...</ul>

<!-- Layout=='list' if layout parameter is list than show this block -->
<ul ng-show="layout == 'list'" class="list">...</ul>

Css that makes the list and grid layout:

/*-------------------------
  List layout
--------------------------*/

ul.list {
  list-style: none;
  width: 500px;
  margin: 0 auto;
  text-align: left;
}

ul.list li {
  border-bottom: 1px solid #ddd;
  padding: 10px;
  overflow: hidden;
}

ul.list li img {
  width: 120px;
  height: 120px;
  float: left;
  border: none;
}

ul.list li p {
  margin-left: 135px;
  font-weight: bold;
  color: #6e7a7f;
}

/*-------------------------
  Grid layout
--------------------------*/

ul.grid {
  list-style: none;
  width: 570px;
  margin: 0 auto;
  text-align: left;
}

ul.grid li {
  padding: 2px;
  float: left;
}

ul.grid li img {
  width: 280px;
  height: 280px;
  display: block;
  border: none;
}