grid icon indicating copy to clipboard operation
grid copied to clipboard

Integrate with Angular

Open eugene-palacios opened this issue 9 years ago • 2 comments

Hi, I wanted to ask how to integrate this plugin to angularJS with ng-repeat? thanks!

eugene-palacios avatar Oct 31 '15 17:10 eugene-palacios

I am using ng-repeat without an issue. I use ng-repeat on the innermost div with all of the data-x, data-y, etc attributes. It ends up looking like this:

<div class="grid-container" style="height: 100%; width: 100%;">
  <div class="container" style="position:relative; height: 100%; width: 100%;">
    <div ng-repeat="item in items" class="grid-item" style="position:absolute" data-x="{{item.x}}" data-y="{{item.y}}" data-w="{{item.w}}" data-h="{{item.h}}">
        {{item.name}}
    </div>
  </div>
</div>

This is the code in my controller:

$scope.items = [
    {w: 1, h: 1, x: 0, y: 0, name: "John"},
    {w: 1, h: 1, x: 0, y: 1, name: "Jane" },
    {w: 1, h: 1, x: 0, y: 2, name: "Joe"}
  ];

   $timeout(function(){
     $('.container').gridList(
       {lanes: 2,
       itemSelector: '.grid-item'});
   });

tracyalison11 avatar Aug 09 '16 21:08 tracyalison11

See also #94

loftyduck avatar Sep 29 '17 22:09 loftyduck