带有ng-repeat的AngularJS高亮表包含一个下拉列表

Question

我的ng-repeat中有一些控件。其中之一是如下所示的下拉菜单。在按钮上单击“我正在验证必填字段”，并要突出显示出现错误的表格单元格。对于下拉菜单，我无法突出显示表格单元格或控件。代码如下。

<tr ng-repeat="data in myData">

    <td>

        <select class="form-control" ng-required="true" ng-options="env for env in types" ng-model="data.type">                 

            <option value="">Select</option>

        </select>

    </td> 

 </tr>

但是对于文本框，我可以执行以下操作，并且它突出显示了：

<td ng-class="{ 'has-error': myForm['input_' + {{$index}}].$invalid && (myForm['input_' + {{$index}}].$touched || myForm.$submitted) }">

    <input type="text" name="input_{{$index}}" required ng-model="data.input" class="form-control" />

  </td>

上面的代码对于文本框工作正常，我可以看到红色突出显示，但是如果我使用与TD相同的代码，它将无法正常工作。

Answer 1

您的select标签需要一个名称。AngularJS中的验证状态要求form元素具有名称：<td ng-class="{ 'has-error': myForm['input_select_' + {{$index}}].$invalid && (myForm['input_select_' + {{$index}}].$touched || myForm.$submitted) }">&nbsp; <select class="form-control"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="input_select_{{$index}}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ng-required="true"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ng-options="env for env in types"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ng-model="data.type">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <option value="">Select</option>&nbsp; </select></td>&nbsp;

Answer 2

您尝试使用$ index函数。<tr ng-repeat="data in myData track by $index">&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" style="color:{{highlight[$index]}};" ng-required="true" ng-options="env for env in types" ng-model="data.type" ng-change="colorchange($index)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Select</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </td>&nbsp;&nbsp;</tr>