grid
grid copied to clipboard
Integrate with Angular
Hi, I wanted to ask how to integrate this plugin to angularJS with ng-repeat? thanks!
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'});
});
See also #94