AngularJS Example:

by sqiudward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div ng-app="app">
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">


    <div class="row" ng-repeat="caches in vm.caches | chunkBy:4" style="margin-top: 15px;">
      <div class="col-sm-3" ng-repeat="cache in caches">

        <div class="qdi-cache-box">
          <span class="pull-left">
            <i class="fa fa-archive fa-lg ng-binding"></i>
            {{$index + 1}}
          </span>

          <span class="pull-right">
            <i class="btn btn-danger fa fa-lg fa-retweet"></i>
          </span>


          <br>
          <br>

          <div class="text-center">
            <span class="text-center">
              <b>Name</b> <br>
              <small class="ng-binding">{{cache.name}}</small>
            </span>

            <br>
            <br>

            <span class="text-center">
              <b>Model</b> <br>
              <small class="ng-binding">{{cache.model}}</small> (hrs)
            </span>

            <br>
            <br>


          </div>



        </div>

      </div>

    </div>

  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

body {
  margin: 30px;
  width: 1000px;
  height: 200px;
}

.qdi-cache-box {
  background-color: #e8e8e8;
  border-radius: 20px;
  padding: 13px;
  width: 180px;
  height: 168px;
  cursor: pointer;
}

.qdi-cache-box:hover {
  transform: translateY(-5px) translateX(-5px);
  background: #e6e6e6;
  box-shadow: 4px 4px 4px #888888;
  z-index: 1050;
}

.qdi-cache-box:active {
        transform: translateY(3px) translateX(0px);
        background: #e6e6e6;
        box-shadow: 4px 4px 4px #888888;
        z-index: 1050;
    }

JavaScript

var app = angular.module("app", ['a8m.chunk-by']);

function TodoCtrl($scope) {
  $scope.vm = {};
  $scope.vm.caches = [{
      name: "Samsung",
      model: "S8"
    },
    {
      name: "Samsung",
      model: "S9"
    }, {
      name: "Iphone",
      model: "X"
    },
    {
      name: "Iphone",
      model: "6"
    },
    {
      name: "Samsung",
      model: "S8"
    },
    {
      name: "Samsung",
      model: "S9"
    }, {
      name: "Iphone",
      model: "X"
    },
    {
      name: "Iphone",
      model: "6"
    }
  ];

}


angular.module('a8m.filter-watcher', [])
  .provider('filterWatcher', function() {

    this.$get = ['$window', '$rootScope', function($window, $rootScope) {

      /**
       * Cache storing
       * @type {Object}
       */
      var $$cache = {};

      /**
       * Scope listeners container
       * scope.$destroy => remove all cache keys
       * bind to current scope.
       * @type {Object}
       */
      var $$listeners = {};

      /**
       * $timeout without triggering the digest cycle
       * @type {function}
       */
      var $$timeout = $window.setTimeout;

      /**
       * @description
       * get `HashKey` string based on the given arguments.
       * @param fName
       * @param args
       * @returns {string}
       */
      function getHashKey(fName, args) {
        function replacerFactory() {
          var cache = [];
          return function(key, val) {
            if (_.isObject(val) && !_.isNull(val)) {
              if (~cache.indexOf(val)) return '[Circular]';
              cache.push(val)
            }
            if ($window == val) return '$WINDOW';
            if ($window.document == val) return '$DOCUMENT';
            if (angular.isDefined(val)) return '$SCOPE';
            return val;
          }
        }
        return [fName, JSON.stringify(args, replacerFactory())]
          .join('#')
          .replace(/"/g, '');
      }

      /**
       * @description
       * fir on...