ng-repeatセクションの後にエラーメッセージを表示します

Question

AngularJsにng-repeatセクションを追加しました。私は必要なフィールドバリデーターを追加しました。ただし、スパンタグのデータが表示されているので、すべてのフィールドが空になるとページの高さが上がります。エラーを説明するng-repeatセクションの後に1つのエラーメッセージしか表示できません。現在の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> 

AngularJsで必要なデータを記述するためにNG-繰り返しセクションの後に一つだけのエラーメッセージを追加する方法は？ ありがとう

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); 
} 

合計レコード数とタイル数の合計がカウントされます。後者が総レコード数より少ない場合は、エラーmsgを表示し、それ以外の場合は続行します。

これが役に立ちます。