0

How can I hide a div using ng-hide? I have this code and I want to hide me the div with id="ApagarNA".

This code shows me a table with values in it, but I have some rows where the value is N.A, and when I have N.A in all 4 columns of that row, I want to hide that row. In this case, I sent just the code for one row (2WK) but for the other rows, it is the same.

There is the table, the row 2WK is (2 Semanas), which has all columns with N.A. And the others (9 Meses and 2 Meses) also I need to hide.

I've tried to do with ng-if but it deleted me the entire row even if the column has value.

<div id="ApagarNA" data-ng-if=$odd ng-if="!item.Last && !item.LastUm && !item.LastDois && !item.LastTres" class="tableRowOdd" data-ng-show="item.TipoOWS === '9M'">

enter image description here


<!-- 2WK Type -->

<div id="ApagarNA" data-ng-if=$odd class="tableRowOdd" data-ng-show="item.TipoOWS === '2WK'">
     <div class="tableCellContent20">
          <h3 class="cellTextType" ><span>{{::item.TipoCalculado.split('#')[1]}}</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.Last"><span>{{::item.Last.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.Last"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastUm"><span>{{::item.LastUm.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastUm"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastDois"><span>{{::item.LastDois.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastDois"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastTres"><span>{{::item.LastTres.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastTres"><span>N.A.</span></h3>
      </div>
</div>

<div id="ApagarNA" data-ng-if=$even class="tableRowEven" data-ng-show="item.TipoOWS === '2WK'">
      <div class="tableCellContent20">
           <h3 class="cellTextType" ><span>{{::item.TipoCalculado.split('#')[1]}}</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.Last"><span>{{::item.Last.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.Last"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastUm"><span>{{::item.LastUm.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastUm"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastDois"><span>{{::item.LastDois.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastDois"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastTres"><span>{{::item.LastTres.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastTres"><span>N.A.</span></h3>
      </div>
</div>
CSAnimor
  • 137
  • 7

2 Answers2

2

So basically ng-hide takes an expression, if that expression is true, then that particular element will be hidden.

Suppose you have the following html-

<table id="my-table" ng-hide="ctrl.shouldHide()">
</table>

And in the js side - 

function shouldHide(){
// some logic upon which this method would return true/false
}

So what you can do is - you can implement a similar shouldHide method, which will check if all the columns are N/A, then it would return true. Otherwise it would return false. Hope it helps

Arnab Roy
  • 619
  • 5
  • 16
0

no need for nghide, instead use ngIF. like *ngIf='f==1' The good thing about this is that the div will only visible if the condition inside the ngIf is true. So the div will be hidden if the condition is not satisfied

Faizal Hussain
  • 1,551
  • 2
  • 10
  • 18