angularJs ng-repeat并显示表格上方的错误
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularJs ng-repeat并显示表格上方的错误相关的知识，希望对你有一定的参考价值。
这应该是一个相对简单的问题（我希望），但我昨晚花了几个小时没有成功。我正在使用ng-repeat和输入控件在表格中显示设备行，我想在我的表格上方显示验证错误。我尝试了以下方法：
<div class="col-xs-12" ng-show="equipmentDuplicatesForm.$invalid">
<div class="info-text-block info-text-block-error">
<p ng-show="(equipmentDuplicatesForm.assetNo.$error.smDuplicate || equipmentDuplicatesForm.assetNo.$error.duplicate)">
{{getDuplicateError()}}
</p>
<p ng-show="equipmentDuplicatesForm.assetNo.$error.maxlength">
@string.Format(Messages.cannotExceed, Labels.assetNo, "100")
</p>
<p ng-show="equipmentDuplicatesForm.serialNo1.$error.maxlength">
@string.Format(Messages.cannotExceed, Labels.serialNo1, "100")
</p>
</div>我的表使用以下代码：
<tbody infinite-scroll="loadMore()">
<tr ng-repeat="row in duplicatesArray"
ng-click="selectedDuplicateIndex=$index;"
ng-class="{selected: $index === selectedDuplicateIndex}">
<td style="text-align:center;">
<input type="checkbox"
name="checkRow"
ng-model="row.isSelected"/>
</td>
<td>
<span ng-if="row.barcode>0">{{row.barcode}}</span>
<span>{{$index}}</span>
<span class="pull-right">
<i class="fa fa-trash"
style="color:red;"
ng-click="removeRow($index)"
title="@Labels.delete"></i>
</span>
</td>
<td>
<div class="col-xs-12">
<input type="text"
name="assetNo"
id="assetNo"
ng-model="row.assetNo"
class="form-control"
ng-change="checkAssetNo(row)"
ng-maxlength="100"
sm-duplicate-validator
validate-duplicates="true"
error-message="row.errorMessage"
api-method="api/rentalEquipments/checkForDuplicate"
primary-key-value="row.equipmentId"
ng-model-options="{ debounce: { default : 500, blur: 0 }}" />
</div>
</td>
<td>
<input type="text"
name="serialNo1"
id="serialNo1"
ng-model="row.serialNo1"
class="form-control"
ng-maxlength="100" />
</td>我无法在表格上方显示maxlength错误，并且重复错误的成功有限。我还尝试将ng-form添加到ng-repeat中以单独的形式显示每一行，但这也不起作用。
有关如何使其工作的任何想法？
答案
即使我真的不喜欢这种解决方案，我也能够使它工作。我放
<div class="col-xs-12" ng-show="equipmentDuplicatesForm.$invalid">
<div class="info-text-block info-text-block-error">
<p ng-show="getDuplicateError()">
{{validationError}}
</p>
<p ng-show="equipmentDuplicatesForm.assetNo.$error.maxlength || isAssetNoMaxLenError">
@string.Format(Messages.cannotExceed, Labels.assetNo, "100")
</p>
<p ng-show="equipmentDuplicatesForm.serialNo1.$error.maxlength || isSerialNo1MaxLenError">
@string.Format(Messages.cannotExceed, Labels.serialNo1, "100")
</p>
<p ng-show="equipmentDuplicatesForm.serialNo2.$error.maxlength || isSerialNo2MaxLenError">
@string.Format(Messages.cannotExceed, Labels.serialNo2, "100")
</p>
<p ng-show="equipmentDuplicatesForm.serialNo3.$error.maxlength || isSerialNo3MaxLenError">
@string.Format(Messages.cannotExceed, Labels.serialNo3, "100")
</p>
<p ng-show="equipmentDuplicatesForm.serialNo4.$error.maxlength || isSerialNo4MaxLenError">
@string.Format(Messages.cannotExceed, Labels.serialNo4, "100")
</p>
</div>
</div>另一答案
我对上述解决方案进行了更多测试，发现它无法正常工作。真的需要找到一种更清晰的方法来显示ng-repeat循环之上的错误。这应该是一个比较常见的问题，可能有人已经解决了吗？
以上是关于angularJs ng-repeat并显示表格上方的错误的主要内容，如果未能解决你的问题，请参考以下文章
使用 ng-repeat 将鼠标悬停在表格中的文本上时显示图像