1

I have a grid setup in my web application. When the user checks a box it switches to a second grid already loaded on the DOM ( a printer friendly version ). There is also a third grid loaded which is populated as the user chooses rows they want to see separately.

For each of the grids I have a search bar. Each grid needs its own separate bar, so as I'm switching between them the previous bar is displayed for a second while the other is loaded (I'm using ngshow + nghide to do this). I've tried using ngcloak like this:

input type="text" ng-hide="print || checked" class="form-control ng-cloak" ng-model="gridOptions.quickFilterText">

with this css class :

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

Also angular.js is the first thing loaded on the page, from within the header on my HTML.

From what I've read it seems ngcloak may only work from when the DOM is initially loaded? If so is there another way to hide element one immediately as element two needs to be loaded?

Thanks

notAChance
  • 1,360
  • 4
  • 15
  • 47

1 Answers1

0

Make sure you have each grid unique and on the time of clicking one store some value in scope variable and and based on that variable apply your show and hide condition. it might help you

Mahaveer Jain
  • 31
  • 9
  • I'm not sure I fully understand you. At the minute each checkbox triggers a variable to true or false, and these variables are what I use to display or hide my search bars. – notAChance Sep 28 '15 at 09:45
  • @xeon48 yes, at the time when you select a checkbox you can store its id or index in your scope and display your search box when $index == ScopeVariableValue. – Mahaveer Jain Sep 28 '15 at 10:25
  • Yes this is what I'm doing. – notAChance Sep 28 '15 at 10:28