在 ng-repeat 中单独将样式应用于一个字段

Question

`http://plnkr.co/edit/jj7LvmZ73MKUAdecQzpP`

请提供一个解决方案，将 CSS 单独应用于一个选定的字段，而不是 ng-repeat 中的整行。

我正在使用 ng-repeat 网格中的必填字段进行表单验证。我想检查模糊输入的值，如果为空则显示错误红色边框。但是当单个字段为空时，所有字段都会突出显示。所以我想单独突出显示字段。

当我点击其他文本框时，边框消失了。我希望边界保持不变，直到它被填满而不是空的。请指导我。非常感谢您的帮助。

从 http://code.ciphertrick.com/2014/12/06/highlight-a-selected-row-in-ng-repeat-using-ng-class/ 获取源代码来演示我的问题。

Answer 1

只需捕获当前上下文（使用“this”）并设置局部变量值（“selectedRow”）并仅使用此局部变量来设置 class ng-class

<input type="text" ng-class="{'selected':selectedRow}" ng-blur="setClickedRow($index,this)" name="userName" ng-model="user.name[$index]" ng-required="true"/>

$scope.setClickedRow = function(index,context){
    var val= $scope.user.name[index];
    if(angular.isUndefined(val) || val === null){
    context.selectedRow = true; }
    else{
    context.selectedRow = false; }
}

Plunker

Ps:- 我将 selectedRow 附加到上下文而不是控制器范围:-)

在 ng-repeat 中单独将样式应用于一个字段

Apply style to one field alone in ng-repeat

html

javascript

css

angularjs

angularjs-ng-repeat