javascript - Angular ngIf + Bootstrap 行 : content of last div gets nested in previous div or is not rendered

Question

当我在 5 个 div 的行中的 3 个 div 上使用 ngIf 时，最后一个 div 的内容会在倒数第二个 div 内呈现，或者根本不会呈现，即使 >最后一个 div 没有应用 ngIf。使困惑？我也是。详细信息如下:

我有以下代码:

<div class="col-xs-24" style="margin-bottom: 10px">
<div class="row" ng-repeat="item in SomeList">
    <div class="col-xs-5">{{item.Name}}:</div>
    <div class="col-xs-2" ng-if="item.UsesRating"><input type="text" style="width: 100%" ng-model="item.Rating"/></div>
    <div class="col-xs-4" ng-if="item.UsesRating">/{{item.MaxRating}}</div>
    <div class="col-xs-6" ng-if="!item.UsesRating">
        <select ng-model="e" class="form-control input-sm" ng-options="e.IsPassed as e.Description for e in EvaluationWithoutRating" name="evaluatie" required>
    </div>
    <div class="col-xs-12"><input type="text" style="width: 100%" placeholder="Comment" ng-model="item.Comment"/></div>
</div>

我正在尝试使用 bootstrap cols 实现以下目标:

我想要其中一个

<强>|第 1 部分 |第 4 区 |第 5 部分 |

或者

<强>|第 1 部分 |第 2 部分 |第 3 部分 |第 5 部分 |

我得到的是

<强>|第 1 部分 | 4 区 5 区 |
(div 5 内容嵌套在 div 4 中)

或者

<强>|第 1 部分 |第 2 部分 |第 3 部分 |
(第 5 部分未显示)

从上面的代码片段生成的 HTML 呈现:

    <div class="col-xs-24" style="margin-bottom: 10px;">
<!-- ngRepeat: item in SomeList --><div class="row ng-scope" ng-repeat="item in SomeList">
    <div class="col-xs-5 ng-binding">test:</div>
    <!-- ngIf: item.UsesRating --><div class="col-xs-2 ng-scope" ng-if="item.UsesRating"><input class="ng-pristine ng-untouched ng-valid ng-empty" style="width: 100%;" type="text" ng-model="item.Rating"></div><!-- end ngIf: item.UsesRating -->
    <!-- ngIf: item.UsesRating --><div class="col-xs-4 ng-binding ng-scope" ng-if="item.UsesRating">/50</div><!-- end ngIf: item.UsesRating -->
    <!-- ngIf: !item.UsesRating -->
</div><!-- end ngRepeat: item in SomeList --><div class="row ng-scope" ng-repeat="item in SomeList">
    <div class="col-xs-5 ng-binding">testf sdf:</div>
    <!-- ngIf: item.UsesRating --><div class="col-xs-2 ng-scope" ng-if="item.UsesRating"><input class="ng-pristine ng-untouched ng-valid ng-empty" style="width: 100%;" type="text" ng-model="item.Rating"></div><!-- end ngIf: item.UsesRating -->
    <!-- ngIf: item.UsesRating --><div class="col-xs-4 ng-binding ng-scope" ng-if="item.UsesRating">/50</div><!-- end ngIf: item.UsesRating -->
    <!-- ngIf: !item.UsesRating -->
</div><!-- end ngRepeat: item in SomeList --><div class="row ng-scope" ng-repeat="item in SomeList">
    <div class="col-xs-5 ng-binding">testggdfg g:</div>
    <!-- ngIf: item.UsesRating -->
    <!-- ngIf: item.UsesRating -->
    <!-- ngIf: !item.UsesRating --><div class="col-xs-6 ng-scope" ng-if="!item.UsesRating"><select name="evaluatie" class="form-control input-sm ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" required="" ng-model="e" ng-options="e.IsPassed as e.Description for e in EvaluationWithoutRating"><option value="number:0" label="Geslaagd">Geslaagd</option><option value="number:1" label="Niet geslaagd">Niet geslaagd</option><input class="ng-pristine ng-untouched ng-valid ng-empty" style="width: 100%;" type="text" placeholder="Comment" ng-model="item.Comment"></div><!-- end ngIf: !item.UsesRating -->
</div><!-- end ngRepeat: item in SomeList -->

编辑:将代码英语化

Answer 1

您尚未关闭select标签。尝试关闭并重新加载页面。让我知道，如果有效的话..:)