Angular ng-if hiding the elements without any condition on them

Question

I have just began working in angular after months of working on VueJs. I am facing a confusing problem here.

<div class="form-group">
    <label class="col-sm-3 control-label">ABS</label>
    <div class="col-sm-6">
        <input type="text" ng-model="absTarget" class="form-control" placeholder="Set Target" />
    </div>
</div>

<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="absLocation" checkboxes="true" extra-settings="setting1" />
</div>
<br />

<div class="form-group">
    <label class="col-sm-3 control-label">Seven Star</label>
    <div class="col-sm-6">
        <input type="text" ng-model="ssTarget" class="form-control" placeholder="Set Target" />
    </div>
</div>

<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="ssLocation" checkboxes="true" extra-settings="setting1" />
</div>

<div class="form-group">
    <label class="col-sm-3 control-label">DEN</label>
    <div class="col-sm-6">
        <input type="text" ng-model="denTarget" class="form-control" placeholder="Set Target" />
    </div>
</div>

<div class="form-group" ng-if="SelectedTask.location">
<label class="col-sm-3 control-label">Location</label>
<div ng-dropdown-multiselect="" options="example10data" selected-model="denLocation" checkboxes="true" extra-settings="setting1" />
</div>

This is my selected task object :

{"name":"SMS report","location":false}

So basically I have to show the 2nd,4th and 6th elements only when SelectedTask.location is true.

The problem is whenever SelectedTask.location equals false, then only 1st div element is visible, rest all becomes hidden

ruth · Accepted Answer · 2020-03-30T12:26:33.373

Self-closing <div> tag may not be supported by your parser. See here.

So the inner div of the first element isn't closed where you think it does. Which leaves the first element's outer div applied to all the following elements. Quick solution would be manually close all the inner divs.

<div class="form-group" ng-if="SelectedTask.location">
  <label class="col-sm-3 control-label">Location</label>
  <div ng-dropdown-multiselect="" options="example10data" selected-model="absLocation" checkboxes="true" extra-settings="setting1"></div>
</div>
<br />

Angular ng-if hiding the elements without any condition on them

1 Answers1