Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Items added outside ng-repeat #177

Closed
AlexCuse opened this issue May 20, 2014 · 3 comments
Closed

Items added outside ng-repeat #177

AlexCuse opened this issue May 20, 2014 · 3 comments

Comments

@AlexCuse
Copy link

We have a kind of funny use case where we want to list items (sortable) using ng-repeat, but then add a "footer" item with controls to add items and such. We are trying to use the "items" option and a marker class to accomplish fixing items in place, eg { items: ':not(.pinned)' }

What I'm seeing is that if I add the pinned class via ng-class inside ng-repeat it works as I'd expect - the pinned item cannot be moved : http://codepen.io/anon/pen/Enfte

What I want however is to add a pinned row in my markup outside ng-repeat, eg http://codepen.io/anon/pen/KHlgB

When going this route the last item is draggable, but on drop it snaps into its original position - so the items selector seems to be at least partly effective. It also adds an empty item at the drop position that then remains fixed there (again draggable but not droppable). Subsequent actions do not add additional items.

I am far from an expert on angular so please forgive me if I am doing something stupid here. Just figured I would raise the issue before we start down the road of accomplishing the same visual effect with CSS hackery.

@thgreasi
Copy link
Contributor

README clearly states:

  • ui-sortable element should only contain one ng-repeat and not any other elements (above or below).
    Otherwise the index matching of the generated DOM elements and the ng-model's items will break.
    In other words: The items of ng-model must match the indexes of the generated DOM elements.

And also suggests:

  • ui-sortable lists containing many 'types' of items can be implemented by using dynamic template loading with ng-include or a loader directive, to determine how each model item should be rendered.

So rephrasing README, I would suggest you to follow one of these directions:

  • either place the controls right below & outside the <ul>
  • or use a directive for all list items and let it decide the proper way to present them (actual items or item with controls)

PS1: One more duplicate of #41...
PS2: outside ng-repeat is actually next-to the repeater items

@AlexCuse
Copy link
Author

Sorry for wasting your time - not sure how I missed that. And pretty sure I recall now reading it when I was first trying to get this stuff set up :-/

Thanks for the quick reply.

@thgreasi
Copy link
Contributor

NP :)

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

Successfully merging a pull request may close this issue.

2 participants