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 为真时我才必须显示第二、第四和第六个元素。

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

Answer 1

您的解析器可能不支持自闭合 <div> 标记。参见 here。

所以第一个元素的内部 div 并没有像您认为的那样关闭。这使得第一个元素的外部 div 应用于所有后续元素。快速解决方案是手动关闭所有内部 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 在没有任何条件的情况下隐藏元素

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

javascript

html

angularjs

angularjs-directive