angularjs isotope

In this example below you will see how to do a angularjs isotope with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by funkybudda, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright funkybudda ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>angularjs isotope</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="isotopeApp">
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/isotope/1.5.21/jquery.isotope.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  </head>
<div id="items" ng-controller="ItemsCtrl">
    <section class="container" data-iso-repeat="collection"></section>
    <button ng-click="addOne()">Add one</button>
</div>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/funkybudda/angularjs-isotope-jGzFI */
body { padding: 8px 20%; }
#items {
    margin: 0 auto; padding: 8px; 
    border: 1px solid #ddd; }
section {
    margin: 0 auto; padding: 8px 0 0 8px; 
    border: 1px solid #ddd; }
section article { 
    margin: 0 8px 8px 0; padding: 4px; 
    border: 1px solid #ddd; }


/*Downloaded from https://www.codeseek.co/funkybudda/angularjs-isotope-jGzFI */
var app = angular.module('isotopeApp', []);

app.directive('isoRepeat', function ($timeout) {
    return {
        scope: {
            items: '=isoRepeat'
        },
        template:'<div><article ng-click="logHello()" ng-repeat="item in items | orderBy:\'title\'"><h2>{{item.title}}</h2></article></div>',
        link: function (scope, element, attrs) {
            
            var options = {
                animationEngine : 'jquery',
                itemSelector: 'article',
                layoutMode: 'fitRows',
                sortAscending: true
            };
            
            element.isotope(options);
            
            scope.$watch('items', function(newVal, oldVal){
               $timeout(function(){
                    element.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' }); 
               });
            },true);
            
            scope.logHello = function(){
              console.log("hello world")
            }
        }
    };
});

app.controller('ItemsCtrl', function ItemsCtrl($scope, $timeout, dataService) {
        
    $scope.update = function () {
        dataService.get().then(function (data) {                       
            $scope.collection = data;
        });
        $timeout($scope.update, 4000);
    };
    
    $scope.update();
   
    $scope.addOne = function(){
        $scope.collection.push({id:1, title: "Item 22"});
    }        
});
    
app.service('dataService', function ($http) {
    return {
        get: function () {
            
            // generate random data
            var randomItems = [];
            for (var i = 0; i < 10; i++) {
                
                var id = Math.floor(Math.random() * 101);
                
                randomItems.push({
                    id: id,
                    title: "Item "+ id
                });
            }
            
            // prepare data for jsfiddle echo service
            var postData = $.param({
                'json': angular.toJson(randomItems),
                'delay': 2
            });
            
            var promise = $http
                .post('/echo/json/', postData)
                .then(function (resp) {
                    return resp.data;
                });
            
            return promise;
        }
    };
});

Comments