在ng repeat段后显示错误消息

Question

我在AngularJs中添加了ng repeat部分。我添加了一个必需的字段验证器。但是，当所有字段都清空时，页面高度会增加，因为会显示span标记数据。。是否可以在描述错误的ng repeat部分之后仅显示一条错误消息。当前UI代码如下：

<div class="row" ng-if="selectedSeasonType">
                    <div class="form-group ">
                        <label class="form-group col-md-3">Language</label>
                        <label class="form-group col-md-4">Title</label>
                        <label class="form-group col-md-5">Description</label>
                    </div>
                </div>
                <br />



          <div class="row" ng-repeat="Descriptions in seasonsWithDescription" ng-if="selectedSeasonType">
                    <div class="form-group col-md-2 top-Margin-language">
                        <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
                    </div>
                    <div class="form-group col-md-4 top-Margin-Title">
                        <input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
                        <span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
                    </div>
                    <div class="form-group col-md-5">
                        <textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
                        <span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
                    </div>
                    <div class="form-group col-md-1">
                        <a style="cursor:pointer">
                            <img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || seasonsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
                        </a>
                    </div>
                </div>

如何在ng repeat部分之后只添加一条错误消息，以在AngularJs中描述所需的数据？谢谢

Answer 1

根据评论，这里有一个plnkr以满足您的需要。

 $scope.isTitleMissing = false;

$scope.cars = [{id: 1, 'brand': 'Chevy', 'model': 'Camarro'},
{id: 1, 'brand': 'Ford', 'model': 'Mustang'},
{id: 1, 'brand': 'Hyundai', 'model': 'Santa Fe'},
{id: 1, 'brand': 'Honda', 'model': 'CRV'},
{id: 1, 'brand': 'BMW', 'model': '350'}]


$scope.submitForm = function(){

 var ctr = $scope.cars.length;
 var titleCtr = 0;
 for(var i = 0 ; i < ctr ; i++){
   if($scope.cars[i].title != null){
     titleCtr++;
   }
 }
//

if(titleCtr < ctr){
  $scope.isTitleMissing = true;
}else{
  //continue with submit
   $scope.isTitleMissing = false;
  // alert('Total cars - ' + ctr + ' and total Title '+ titleCtr);
}

它只是有一个总记录数，另一个是总分片数。如果后者小于总记录数，则显示错误消息，否则继续提交。

希望这有帮助。