Angular ng-if 在没有任何条件的情况下隐藏元素
Angular ng-if hiding the elements without any condition on them
经过数月的 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 元素可见,其余的都隐藏起来
您的解析器可能不支持自闭合 <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 />