Question

当我在5个div的行中使用3个div时使用ngIf时，最后一个div的内容会在第2个到最后一个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实现以下功能：

我想要

| div 1 | div 4 | div 5 |

OR

| div 1 | div 2 | div 3 | div 5 |

我得到的是

| div 1 | div 4 div 5 |
（div 5 content 嵌套在div 4中）

OR

| div 1 | div 2 | div 3 |
（div 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代码。尝试关闭并重新加载页面。让我知道，如果有效..：）

Angular ngIf + bootstrap行：最后一个div的内容嵌套在前一个div中或不呈现

1 个答案: