ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Toggle between List and Grid (Switchable Grid) in AngularJS<p>Hi&nbsp;rani,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .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; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, []); app.controller(&#34;MyController&#34;, function ($scope) { $scope.layout = &#39;grid&#39;; $scope.Data = [ { Name: &#34;Desert&#34;, Path: &#34;Images/Desert.jpg&#34; }, { Name: &#34;Hydrangeas&#34;, Path: &#34;Images/Hydrangeas.jpg&#34; }, { Name: &#34;Jellyfish&#34;, Path: &#34;Images/Jellyfish.jpg&#34; }, { Name: &#34;Koala&#34;, Path: &#34;Images/Koala.jpg&#34; }, { Name: &#34;Lighthouse&#34;, Path: &#34;Images/Lighthouse.jpg&#34; }, { Name: &#34;Penguins&#34;, Path: &#34;Images/Penguins.jpg&#34; }, { Name: &#34;Tulips&#34;, Path: &#34;Images/Tulips.jpg&#34;}]; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div class=&#34;bar&#34;&gt; &lt;a class=&#34;list-icon&#34; ng-class=&#34;{active: layout == &#39;list&#39;}&#34; ng-click=&#34;layout = &#39;list&#39;&#34;&gt; &lt;/a&gt;&lt;a class=&#34;grid-icon&#34; ng-class=&#34;{active: layout == &#39;grid&#39;}&#34; ng-click=&#34;layout = &#39;grid&#39;&#34;&gt; &lt;/a&gt; &lt;/div&gt; &lt;ul ng-show=&#34;layout == &#39;grid&#39;&#34; class=&#34;grid&#34;&gt; &lt;li ng-repeat=&#34;data in Data&#34;&gt;&lt;img ng-src=&#34;{{data.Path}}&#34; height=&#34;150px&#34; width=&#34;150px&#34; /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul ng-show=&#34;layout == &#39;list&#39;&#34; class=&#34;list&#34;&gt; &lt;li ng-repeat=&#34;data in Data&#34;&gt; &lt;img ng-src=&#34;{{data.Path}}&#34; height=&#34;75px&#34; width=&#34;75px&#34; /&gt; &lt;p&gt;{{data.Name}}&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/OhP107s.gif" alt="" width="341" height="427" /></span></strong></p>https://www.aspforums.net:443/Threads/449331/Toggle-between-List-and-Grid-Switchable-Grid-in-AngularJS/https://www.aspforums.net:443/Threads/449331/Toggle-between-List-and-Grid-Switchable-Grid-in-AngularJS/Tue, 30 Jul 2019 06:10:02 GMT