ng-repeat 섹션 다음에 오류 메시지가 표시됩니다.

Question

AngularJs에 ng-repeat 섹션을 추가했습니다. 필자는 필수 필드 유효성 검사기를 추가했습니다. 그러나 스팬 태그 데이터가 나타나므로 모든 필드가 비워지면 페이지 높이가 증가합니다. 오류를 설명하는 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> 

어떻게 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); 
} 

총 레코드 수와 총 타일 수의 합계입니다. 후자가 전체 레코드보다 작 으면 오류 메시지가 표시되고 다른 메시지는 계속 제출됩니다.

희망이 도움이됩니다.