Problem scrolling into view a div that was created with ng-repeat

[Michael J. Mahony]

Hi,

I have what should be a simple problem, but is baffling me.I have a page where the display is created by ng-repeat. It is essentially a table (using DIVs) and each record is twso rows. The top row of each record has two buttons that when clicked show a related div filled with data. The problem is when there is a div is at the bottom of the viewport and the button is clicked, the hidden div appears and is MOSTLY off the screen. A scrollbar appears in the browser. I have used the JQuery scrollTo feature and it brings the div contents into view, but it even scrolls things that are already in view as well. What I have discovered is that the function that tests for visibility uses bounds.top and bounds.bottom and bounds.left and bounds.right to determine if the item is visible. Every single DIV has the same values for bounds.top. This is causing me an issue because what I want to do is:

1. Have the button click happen.

2. Reveal the hidden div.

3. Determine if the newly revealed div is visible in the viewport

4. If yes, do nothing. If no, scroll it into view.

How can I possibly do this when every single div is showing as the same position on the screen? (which is the REAL location of the first div created with ng-repeat).

Thanks!

[Sander Elias]

Hi Michael,

Move the data about positioning out of the DOM and into a data-model. Then you can use this data easily to do what you want'

If you want me you to show a bit more, build a plunk or something and I will take a look and provide some more guidance.

Regards

Sander 

[Michael J. Mahony]

Thanks! I figured this out yesterday. We added a row identifier and I use that to accomplish what I want. Thanks again! You guys are super helpful!

Michael J. Mahony

Personal Trainer

ISSA Certified

http://fastfitnessonline.com

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/xYVf92ZOqnQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Michael J. Mahony]

Sander,

While I figured out that adding some data to the model helps with this situation, I am still having issues. Therefore, i am in the process of creating a Plunk and will avail myself of your offer to help me out once I have that completed. Thanks and I will post again when the plunk is done being created.