Toggle between List and Grid (Switchable Grid) in AngularJS

Last Reply 26 days ago By dharmendr

Posted 26 days ago

I have been searching for specific tutorials of list and grid view toggle switch buttons that loads in two different HTML.

Is loading in two partials (list.html and grid.html) is the correct AngularJS way?

<div ng-app="myApp" ng-controller="myControl">
    <div class="bar">
        <a class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
        <a class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
    </div>
    <ul ng-show="layout == 'grid'" class="grid">
        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank">
            <img ng-src="{{p.images.low_resolution.url}}" /></a>
        </li>
    </ul>
    <ul ng-show="layout == 'list'" class="list">
        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank">
            <img ng-src="{{p.images.thumbnail.url}}" /></a>
            <p>{{p.caption.text}}</p>
        </li>
    </ul>
</div>

How can switch with the code.

Posted 26 days ago

Hi rani,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css"> 
        .bar
        {
            background-color: #5c9bb7;
            background-image: -webkit-linear-gradient(top, #5c9bb7, #5392ad);
            background-image: -moz-linear-gradient(top, #5c9bb7, #5392ad);
            background-image: linear-gradient(top, #5c9bb7, #5392ad);
            box-shadow: 0 1px 1px #ccc;
            border-radius: 2px;
            width: 580px;
            padding: 10px;
            margin: 45px auto 25px;
            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;
            cursor: pointer;
        }
        .bar a.active
        {
            background-color: #c14694;
        }
        .bar a.list-icon
        {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/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
        {
            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;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope) {
            $scope.layout = 'grid';
            $scope.Data = [
                { Name: "Desert", Path: "Images/Desert.jpg" },
                { Name: "Hydrangeas", Path: "Images/Hydrangeas.jpg" },
                { Name: "Jellyfish", Path: "Images/Jellyfish.jpg" },
                { Name: "Koala", Path: "Images/Koala.jpg" },
                { Name: "Lighthouse", Path: "Images/Lighthouse.jpg" },
                { Name: "Penguins", Path: "Images/Penguins.jpg" },
                { Name: "Tulips", Path: "Images/Tulips.jpg"}];
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <div class="bar">
            <a class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'">
            </a><a class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'">
            </a>
        </div>
        <ul ng-show="layout == 'grid'" class="grid">
            <li ng-repeat="data in Data"><img ng-src="{{data.Path}}" height="150px" width="150px" /></li>
        </ul>
        <ul ng-show="layout == 'list'" class="list">
            <li ng-repeat="data in Data">
                <img ng-src="{{data.Path}}" height="75px" width="75px" />
                <p>{{data.Name}}</p>
            </li>
        </ul>
    </div>
</body>
</html>

Screenshot