hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 281 forks source link

Integrate with Angular #77

Open eugene-palacios opened 8 years ago

eugene-palacios commented 8 years ago

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

tracyalison11 commented 7 years ago

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'});
   });
loftyduck commented 6 years ago

See also #94