0

I have built a spreadsheet like object in AngularJs, using a table-like structure display data, and a input element which moves around the table cells and replaces the "cell" that is supposed to have focus. My setup includes an ng-repeat which displays each row in the table from an undelryign data structure. When a user clicks on a cell, the <div> for the cell in question is hidden and an input element is moved to that cell's coordinates and shown (using show() and hide(). (I have jquery loaded in my project).

To delete rows, I hide the input element and allow the user to select rows to delete. This changes the data source of the ng-repeat, so it redisplays the table.

The problem comes when afterr the rows in the ng-repeat are reisplayed, if I try to show the input element at a particular location, I find that the element can not be shown.

Reading the documentation for jquery "hide", it says:

"This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value"

When the input cell is hidden with .hide() and then I delete rows from the data source for the ng-repeat, I find that the statement angular.element('#table-input-cell") returns a 0 length array, suggesting that the this element has been deleted from "jQuery's data cache" perhaps as a side-effect of ng-repeat being triggered to re- iterate the collection?

I'm not really sure if this is what is going on, but all I can tell is that I can usually show the input element after it has been hidden, except if I delete rows, then angular.element(#table-input-cell") returns 0 length array, so predictably,angular.element("#table-input-cell").show()` doesn't make the input cell visible on the page.

Is there a way short of recreating the input cell in code and inserting into the document that I can retain access to the hidden cell so that I can show it again?

GGizmos
  • 3,443
  • 4
  • 27
  • 72
  • 1
    Mixing jQuery DOM manipulation with the AngularJS framework is asking for trouble. See [“Thinking in AngularJS” if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). – georgeawg Dec 07 '19 at 20:31
  • Use the [`ng-hide` directive](https://docs.angularjs.org/api/ng/directive/ngHide) to hide elements. – georgeawg Dec 07 '19 at 20:34
  • OK, I can go that way, just wondering though, since its possible this table might have more than 1,000 cells, it seemed like the overhead of angularjs checking all each cell for something like ng-hide="isHidden([some id])" would be an awful lot of checking, on every cycle. Maybe angular is smart enough to avoid that? Or its not a problem? – GGizmos Dec 08 '19 at 03:21

0 Answers0