Angularjs: обязательная проверка выпадающего списка внутри ng-repeat

Question

Использование angualrjs 1.3

Внутри моего ng-повтора есть выпадающее меню:

  <tr ng-repeat="c in myData">
    <td>
        <select name="type" class="form-control" ng-model="c.type" required>
             <option value="">--Select--</option>
             <option ng-repeat="type in types">{{type.text}}</option>
         </select>  
    </td>
  </tr>

Как мне выполнить проверку требуемого поля в раскрывающемся меню.

Iесть другие элементы управления текстовым полем в моем ng-repeat, где я использовал, как показано ниже:

<td ng-class="{ 'has-error': myForm['comment_' + {{$index}}].$invalid && (myForm['comment__' + {{$index}}].$touched || myForm.$submitted) }">
        <input type="text" name="comment_{{$index}}" required ng-model="c.comment" class="form-control" />
    </td>

И проверка работает, но когда я пытаюсь применить то же самое к раскрывающемуся списку, он не работает.

Любые входы?

Answer 1

Angularjs - это большая и интеллектуальная библиотека, в которой вы можете делать все, что угодно, в своем примере вы можете использовать ng-form и ng-options и ng-required вместо общих кодов html и отслеживать ввод с помощью $index в качестве этого примера.

с помощью ng-form вы можете определить каждый tr как форму, а затем проверить проверку формы.

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
    $scope.myData = [
      {},{}
    ]
    
    $scope.types = [1,2,3]
});

.has-error {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <table>
     <tr ng-repeat="c in myData" ng-form="x">
        <td>
          <select ng-model="c.type" ng-options="option for option in types" ng-required="true"></select>
        </td>
        <td>
           <input type="text" ng-model="c.text" ng-required="true" />
        </td>
        <td ng-class="{'has-error': x.$invalid}">
          form is valid: {{x.$valid}}
        </td>
    </tr>
  </table>
</div>