Highlight text box present in a ng-repeat table rows on a button click in angular js

Question

I have a table with checkbox and textbox generated with a ng-repeat

I need to highlight the textbox with some color when the textbox input is undefined/blank and when the corresponding check box is selected .

Need to Validate this on a button click.

Here is the Fiddle

HTML

<div data-ng-controller="SimpleApprovalController">
    <table style="width: 90%" border="5">
        <tr>
            <th></th>
            <th>Date</th>
            <th>AssociateID</th>          
            <th>Comments</th>
        </tr>
        <tr data-ng-repeat="approval in approvalitems" >
            <td><input type="checkbox" value="{{approval.ReqId}}" data-ng-model="approval.selected"  /></td>
            <td>{{approval.Date}}</td>
            <td>{{approval.AssociateID}}</td>           
            <td><input type="text" value="" data-ng-model="approval.comments"  data-ng-class="{'validate-border':validatebit}"/></td>
        </tr>
    </table>     
    <input type="button" value="Reject"  data-ng-click="RejectRequest()" />
</div>

Script

$scope.validatebit = false;
        $scope.RejectRequest = function () {
            var inc = 0;
            $scope.selectedId = [];
            angular.forEach($scope.approvalitems, function (i) {                 
                if ((!!i.selected) && !(angular.isUndefined(i.comments))) {                    
                    $scope.selectedId.push(i.id);
                    $scope.validatebit = false;//NoColor Change
                } else if ((!!i.selected) && (angular.isUndefined(i.comments))) {
                    inc = 1;
                    $scope.validatebit = true;
                    //Color Change for the text box.
                }
                else {
                    //No Color Change
                    $scope.validatebit = false;
                }
            });
        };

I'm adding and removing validate-border css class but it's getting applied to all the text boxes inside the ng-repeat rows .

So is there any better way to highlight only the selected text boxes when the text box value is empty and the corresponding input is checked.I'm a newbie to angularjs.

Answer 1

Update the Fiddle which add border when we check any checkbox

<input type="text" value="" data-ng-model="approval.comments"  data-ng-class="{'validate-border':validatebit,'validate-border':approval.selected}"/>

Here is the Fiddle: http://jsfiddle.net/239pycwy/9/

Answer 2

I work it out. Check this jsfiddle.

use $scope.validatebits to indicate whether to highlight the textbox.

use !i.comments to check comments == undefined or comments == ""