CODEWITHSUNDEEP
angularjs
IWI
IWI

Reputation: 1608

angularjs ng-if hide different div

So I have an ng-if that looks like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="margin-left: 2px;font-style: italics;font-family: 'Roboto', sans-serif; font-size: 12px;color: #818A8F;" ng-bind="'(' + progress + '%' + ' ' + 'complete)'"></p>

<div ng-if="progress == 100">
  <i class="material-icons x{{$index}}" style="position: relative; bottom: 100px; left: 600px; cursor: pointer;" ng-click="vm.removeFile($index)">close</i>
  <br>
  <div class="input-field col m2 l2">
    <input placeholder="First eye exam" id="desc{{$index}}" type="text" class="validate square-box" style="width: 400px !important;">
    <label for="desc{{$index}}" class="active">Description</label>
  </div>
</div>

When the ng-if is triggered, I want to hide the p thats right above the ng-if (and other stuff in the html as well)

I tried something like 

<div ng-if="progress=100"><script>$('p').hide();</script></div>

but obviously that didnt work. whats the correct way of doing this?

Upvotes: 0

Views: 33

Answers (1)

Dario
Dario

Reputation: 6280

Just add

ng-hide="progress == 100"

to all the elements you want to hide. Angular will take care of hiding them when the condition is satisfied.

Upvotes: 2

Related Questions