选择$ pristine textarea

Question

我正在使用AngularJS。我正在尝试对用户应用一些验证和反馈。设置的方式有点奇怪，所以像ng-required这样的东西似乎对它们应用的textareas没有影响（猜测因为它们实际上不在<form>内）

我正在尝试应用一个类，在其中一个字段未填写时将border-color更改为红色。 在我的提交函数中，我正在检查一个标志。如果它未验证为true，则它在else块中运行：

<div ng-repeat="keyWordForm in keyWordForm" class="fadeInBottom">
    {{keyWordForm.snippet}} <br>
    {{$scope.keywords}}
    <textarea style="{{keyWordForm.style}}" ng-required="'true'" class="{{keyWordForm.ourClass}} {{errorRequired}}" name="keyWordFormTextArea" ng-model="keyWordForm.data" ng-change="columnCount()"></textarea>

</div>

这会在我的html：

中使用errorLine来应用课程{{errorRequired}}

<textarea style="{{keyWordForm.style}}" class="{{keyWordForm.ourClass}} {{errorRequired}}" name="keyWordFormTextArea" ng-model="keyWordForm.data" ng-change="columnCount()"></textarea>

但是这会将CSS应用于每个textarea，而不仅仅是$pristine个。 如何将CSS仅应用于尚未填写的字段？

我一直试图使用类似的东西：keywordFormTextArea.$pristine，但找不到有效的方法来使用它来实现我想要的效果。

期望效果：

Answer 1

我意识到问题的最大部分是{{errorRequired}}本质上是一个全局变量。因此，当我尝试在undefined textareas上设置它时，它会将它们设置在所有内容上。 所以我改为将其添加为我的对象的关键。

$ scope.keyWordForm = [     {snippet：“输入关键字:(每个关键字分开一行）”，     风格：“宽度：100％;高度：125px;”，     我们班 ： ””，         keywordData：$ scope.keyWord，     errorRequired：$ scope.errorRequired     }
];

然后在我的循环中，我可以在我的对象的当前索引中选择并在那里设置undefined。

for(var i = 0; $scope.keyWordForm.length > i; i++){
    if(typeof $scope.keyWordForm[i].data == "undefined"){
        $scope.keyWordForm[i].errorRequired = "errorLine";
    }
}

在我的HTML中，我只需要访问该对象。

class="... {{keyWordForm.errorRequired}}

瞧！这实现了仅应用undefined textareas的CSS的能力。