Skip to content
This repository has been archived by the owner on Feb 3, 2022. It is now read-only.

Integrate with Angular #77

Open
eugene-palacios opened this issue Oct 31, 2015 · 2 comments
Open

Integrate with Angular #77

eugene-palacios opened this issue Oct 31, 2015 · 2 comments

Comments

@eugene-palacios
Copy link

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

@tracyalison11
Copy link

tracyalison11 commented Aug 9, 2016

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
Copy link

See also #94

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants