angularJs ng-repeat 并在表格上方显示错误

Question

这应该是一个相对简单的问题（我希望如此）但我昨晚花了几个小时没有成功。我正在使用 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 以以单独的形式显示每一行，但这也不起作用。

关于如何使它工作的任何想法？

Answer 1

即使我真的不喜欢这种变通解决方案，我也能够让它工作。我放了

<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>

在 getDuplicateError 中我做了以下操作

$scope.getDuplicateError = function () {
                    let error = "";
                    $scope.selectedDuplicateIndex = 0;
                    $scope.isAssetNoInError = false;
                    $scope.isAssetNoMaxLenError = false;
                    $scope.isSerialNo1MaxLenError = false;
                    $scope.isSerialNo2MaxLenError = false;
                    $scope.isSerialNo3MaxLenError = false;
                    $scope.isSerialNo4MaxLenError = false;

                    $scope.validationError = "";

                    for (let i = 0; i < $scope.duplicatesArray.length; i++) {
                        const equipment = $scope.duplicatesArray[i];
                        if (equipment.errorMessage)
                            error = error + equipment.errorMessage + "\r\n";

                        if (equipment.warningMessage)
                            error = error + equipment.warningMessage + "\r\n";

                        if (_.isUndefined(equipment.assetNo)) {
                            if (equipment.errorMessage) {
                                $scope.isAssetNoInError = true;
                            }
                            else {
                                $scope.isAssetNoMaxLenError = true;
                            }
                        }

                        if (_.isUndefined(equipment.serialNo1))
                            $scope.isSerialNo1MaxLenError = true;

                        if (_.isUndefined(equipment.serialNo2))
                            $scope.isSerialNo2MaxLenError = true;

                        if (_.isUndefined(equipment.serialNo3))
                            $scope.isSerialNo3MaxLenError = true;

                        if (_.isUndefined(equipment.serialNo4))
                            $scope.isSerialNo4MaxLenError = true;
                    }
                    $scope.validationError = error;
                    return error.length > 0;
                };

这使我能够实现所需的行为。