Angular нг-если скрыть элементы без каких-либо условий на них - PullRequest
Новая
       10

Angular нг-если скрыть элементы без каких-либо условий на них

0 голосов
/ 30 марта 2020

Я только начал работать в angular после нескольких месяцев работы над VueJs. Здесь я сталкиваюсь с запутанной проблемой. 

<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>

Это мой выбранный объект задачи: 

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

Так что в основном я должен показывать 2-й, 4-й и 6-й элементы только при SelectedTask. location is true.

Проблема в том, что когда SelectedTask.location равен false, тогда виден только 1-й элемент div, все остальные становятся скрытыми

1 Ответ

1 голос
/ 30 марта 2020

Самозакрывающийся тег <div> может не поддерживаться вашим анализатором. См. здесь .

Так что внутренний div первого элемента не закрыт, как вы думаете. После чего внешний элемент первого элемента 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>
</div>
<br />
...