Dilatorily / packery-angular

AngularJS module for Packery
http://dilatorily.github.io/packery-angular
MIT License
7 stars 2 forks source link

Example #2

Closed fcailliez closed 7 years ago

fcailliez commented 7 years ago

Hello,

If I integrate your code, it does not work, all cards are supperposed. Do I need to add CSS classes, and what they are the properties of classes ?

Ctrl :

$scope.options = {
        columnWidth: 1, // 300 = same
        dragSelector: '',
        isAppended: true,
        isDraggable: true,
        itemSelector: '.pa-item',
        rowHeight: 1,
        stamp: '.pa-stamp'
    };
$scope.posts = [...]; // data request

View :

<pa-packery pa-options="paoptions">
    <pa-packery-item ng-repeat="data in posts">
        <div>content with img, text, ect..</div>
    </pa-packery-item>
</pa-packery>

Thank you

Dilatorily commented 7 years ago

The pa-packery-item needs the same class as the itemSelector from your $scope.options. In your view, you would need to change to:

<pa-packery-item class="pa-item" ng-repeat="data in posts">

I updated the README and added a working example w/ angular@1.5.9, draggabilly@2.1.1 and packery@2.1.1 in the repository.

fcailliez commented 7 years ago

Great, with your example, it's all right!

Another question : I have a infinite scroll. The blocks are added at the bottom (with : push()), perfect. However, if i want to add a new item to the top of the list (with : unshift()), is it possible ?

Thank you

Example : My Array :
[object, object, object] My view :

<item>
<item>
<item>

My new array with add new item : [object_add, object, object, object] My (bad) view :

<item>
<item>
<item>
<item_add>

I would like (in DOM, it's good) :

<item_add>
<item>
<item>
<item>

Currently, I have to save the array in a variable, clear the array, and call the variable with the new item.

Dilatorily commented 7 years ago

I think isAppended: false should do what you're looking for.

fcailliez commented 7 years ago

Yes and no, If you edit this value, the infinite scroll adds items at the top.

I would like to keep my infitine scroll (isAppended: true => appended), and be able to add just one item (isAppended: false => prepended).

Dilatorily commented 7 years ago

I think you can change the isAppended to false before calling unshift(), then switch it back to true.

I also emit events in the $scope if you ever require refined control over the Packery instance.