0

I have an Angular webApp running with Bootstrap's css.

What I'm doing now is render a table based on some data stored in a matrix, but in some cases, some rows have not relevant data to show so what I do is hide those irrelevant rows. Problem comes here: bootstrap table that I'm using adds a grey background in the pair rows and white in the odd rows.

the code in the angular template that I use is the following: 

<tr ng-repeat="row in estadisticasT1" ng-hide="row.Noches == 0 && estadisticasT2[$index].Noches == 0">                
  <directive ng-if="comparar && ((row.Noches - estadisticasT2[$index].Noches) >= 0)" class="comparativa2">+{{row.Noches - estadisticasT2[$index].Noches}}</directive>
  <directive ng-if="comparar && ((row.Noches - estadisticasT2[$index].Noches) < 0)" class="comparativa3">{{row.Noches - estadisticasT2[$index].Noches}}</directive>    
</tr>

I reduced the code to show only the relevant part, tags are useles for this example, the only interesting part is that I use a ng-hide with a comparsion in order to hide the irrelevant rows of my matrix, but the problem is that in some cases it renders like this:

enter image description here

As you can see the first two rows have a grey background and the next two have a white background. What I need to do is to show a grey background in the odd rows and white in the pair ones, but I can´t do this using the $index variable because it doesn't corresponds to the shown rows but all the rows being shown or not.

Any angular expert have an idea that could help me here ?

Thanks in advance

Albert Prats
  • 786
  • 4
  • 15
  • 32
  • Throw together a fiddle, you should probably be applying the filter on the array but it'd be easier if there was some code to work with first. – Mathew Berg Dec 01 '14 at 12:43

1 Answers1

0

Instead of ng-hide, use ng-if. The latter removes the nodes entirely from the DOM tree, and as such, it shouldn't interfere with your parity-based CSS rules. See the details of the differences between nghide, ngshow and ng-if for example here, or in the angular docs themselves.

Community
  • 1
  • 1
doldt
  • 4,466
  • 3
  • 21
  • 36
  • this just did the trick putting it inside the instead of the ng-hide, thanks ng-if="row.Noches != 0 || estadisticasT2[$index].Noches != 0" – Albert Prats Dec 01 '14 at 15:28