javascript - Angular ng-if 隐藏元素而不对其施加任何条件

Question

在 VueJs 工作了几个月之后，我刚刚开始使用 Angular 工作。我在这里面临一个令人困惑的问题。

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

所以基本上只有当 SelectedTask.location 为 true 时，我才必须显示第 2、第 4 和第 6 个元素。

问题是每当 SelectedTask.location 等于 false 时，只有第一个 div 元素可见，其余全部都隐藏

Answer 1

自动关闭<div>您的解析器可能不支持标记。请参阅here .

所以内在div第一个元素的位置并没有像您想象的那样闭合。这留下了第一个元素的外部 div适用于以下所有元素。快速解决方案是手动关闭所有内部 div s。

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