CODEWITHSUNDEEP
javascriptangularjs
aman
aman

Reputation: 6262

AngularJS highlight table with ng-repeat containing a dropdown

I have some controls in my ng-repeat. One of them is a dropdown as below. On button click I am validating for required field and want to highlight the table cell that has the error. For dropdown I am not able to highlight the table cell or the control. Code as below.

<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>

But for textbox I am able to do below and it does highlights:

<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>

Above code works fine for textbox and I can see red highlight but if I use the same code that I have for my TD it doesnt work.

Any inputs please.

Upvotes: 0

Views: 49

Answers (2)

user11341611
user11341611

Reputation:

You try with $index in function.

<tr ng-repeat="data in myData track by $index">
    <td>
        <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)">                 
            <option value="">Select</option>
        </select>
    </td> 
 </tr>

Upvotes: 0

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

Your select tag needs a name. Validation states in AngularJS require the form element to have a name:

<td ng-class="{ 'has-error': myForm['input_select_' + {{$index}}].$invalid && (myForm['input_select_' + {{$index}}].$touched || myForm.$submitted) }">
  <select class="form-control" 
          name="input_select_{{$index}}"
          ng-required="true" 
          ng-options="env for env in types" 
          ng-model="data.type">                 
    <option value="">Select</option>
  </select>
</td>

Upvotes: 1

Related Questions