Angular ng-if 在没有任何条件的情况下隐藏元素答案

【问题标题】：Angular ng-if hiding the elements without any condition on themAngular ng-if 在没有任何条件的情况下隐藏元素
【发布时间】：2020-07-10 17:46:35
【问题描述】：

在 VueJ 上工作了几个月后，我才刚刚开始使用 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 为真时，我才必须显示第 2、4 和第 6 个元素。

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

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案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 />

【讨论】：